vscode+vue-cli+eslint格式化代码

eslint规范可以让代码看起来更清晰，也可以让团队协作合并代码时减少格式化的冲突。写了这么些时间的前端代码，才想配置一下eslint，下面是本次配置的一些笔记，欢迎指正。

• vscode中安装插件
  • Eslint
  • Prettier ESLint
  • Vetur
• 项目根目录中建立以下文件(若默认有的则不必新建)
  • .eslintrc.js eslint规则配置文件
  • .eslintignore eslint规则忽略校验的配置，例如三方包或者自己自定。
  • .pritterrc pritterrc配置文件，当然也可以配置在setting中，我的理解是一个作用在本项目，一个作用在全部项目。
  • .editorconfig
• .eslintrc.js文件中选择配置如下内容，每个人的都可能不一样。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  // 不允许方法前加星号
   // 'generator-star-spacing': 'off',
  // 函数名后不要加空格，如果不是新建的项目，不想配置函数名后面加空格，那么可以修改eslint的规范来将就
  //'space-before-function-paren': 0,
  //"standard/no-callback-literal": 0 /** callback中可以传参true,若这里不设置为0,则需要new Error(true) */
    quotes: ['error', 'single'], //强制使用单引号
    semi: ['error', 'never'], //强制不使用分号结尾
    eqeqeq: ['error', 'always'], // 强制在任何情况下都使用 === 和 !==
    'brace-style': ['error', '1tbs', { allowSingleLine: true }] //强制在代码块中使用一致的大括号风格
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    parser: 'babel-eslint'
  }
}

• .eslintignore

node_modules
public

• .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "jsxBracketSameLine": false
}

• .editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

打开用户设置，mac是comand+shift+p,windows是ctrl+shift+p,输入setting，打开settings(JSON)。

{
    "editor.quickSuggestions": {
        "strings": true
    },
    "editor.tabSize": 2,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    //设置函数名后面加空格
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.completion.autoImport": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "editor.formatOnSave": true,
    // 设置不显示文件
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true
    }
}

• 常用到vscode插件
  • Auto Close Tag
  • Auto Rename Tag
  • Beautify
  • HTML CSS Support
  • JavaScript(ES6)
  • Path Intellisense
  • Vetur
  • Vue VSCode Snippets