vscode格式化配置

安装vscode插件

• Eslint

• Prettier

• Vetur

主要采用eslint搭配prettier规范的方式。

用户设置/工作区设置

用户设置和工作区设置区别详见：

• https://www.cntofu.com/book/98/md/定制化/用户和工作空间.md

• https://www.jianshu.com/p/25706af1f6a7

code／文件-->首选项-->设置-->setting.json-->编辑（用户设置）

{
    "fileheader.configObj": {
        "createFileTime":true,
        "timeNoDetail":false,
        "autoAdd":true,
        "autoAlready":true,
        "annotationStr": {"head":"/*","middle":" * @","end":" */","use":true},
        "headInsertLine": {"php": 2}},
        "fileheader.cursorMode": {"description":"","param ":"","return":""},
        "fileheader.customMade": {
            "Description":"",//文件内容描述"
            Author":"(name)",//编辑人(此处设置自己的姓名)
            "Email":"[e-mail]",//此处设置自己的邮箱信息
            "Date":"Do not edit",//时间
            "LastEditTime":"Do not edit",
            "LastEditors":"name"//此处设置自己的姓名
        },

        //添加vue支持，代码错误实时提示"
        eslint.validate": [
            "javascript",
            "javascriptreact",
            {"language":"html","autoFix":true},
            {"language":"vue","autoFix":true}
        ],
        // 开启 vscode 文件路径导航
        "breadcrumbs.enabled":true,

        //开启eslint支持，格式化eslint
        "prettier.eslintIntegration":true,

        //ctrl+s保存时自动修正格式错误的js代码
        "eslint.autoFixOnSave":true,

        //保存时自动格式化
        "editor.formatOnSave":true,

        //tab索引为2个空格
        "editor.tabSize": 2,

        //强制单引号
        "prettier.singleQuote":true,

        //声明结尾使用分号(默认true)
        "prettier.semi": false,

        // vetur 的自定义设置
        "vetur.format.defaultFormatterOptions": 
        {
            "prettier": {
                "singleQuote":true
                "semi": false,
            }
        },

        // js默认偏移一个indent应为true
        "vetur.format.scriptInitialIndent":false,

        // style默认偏移一个indent应为true
        "vetur.format.styleInitialIndent":false,

        //只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
        "prettier.arrowParens":"avoid",

        //多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
        "prettier.jsxBracketSameLine":false
}

项目文件配置

.editorconfig

root =true

[*]
charset = utf-8
indent_style = space
indent_size =2
end_of_line = lf
insert_final_newline =true
trim_trailing_whitespace =true

.eslintrc.js

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: false,
    node: true,
    es6: true
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'vue',
    'html'
  ],
  // add your custom rules here
  'rules': {
     // allow paren-less arrow functions
    'arrow-parens': 0,
    'no-extra-semi': 0, //不允许出现不必要的分号
    'space-before-function-paren': 0 //
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  //全局变量，暂不使用
  globals: {
    //App: true,
    //Page: true,
    //getApp: true,
    //getPage: true
  }
}

.eslintignore.js

build/*.js
config/*.js

eslint配置文档参考：https://cloud.tencent.com/developer/doc/1078

https://segmentfault.com/a/1190000008742240（.eslintrc.js配置规则详细说明 ）

https://blog.csdn.net/userkang/article/details/84305689,

https://eslint.org/docs/user-guide/configuring

https://segmentfault.com/a/1190000014785115?utm_source=index-hottest

https://www.jb51.net/article/135191.htm