vscode中使用 ESLint && Prettier 规范代码格式

第一步：配置vscode-文件-首选项-setting.json里面的配置信息，设置点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中，关闭编译器自带的代码检查规则

2：在项目 package.json中修改 prettier配置规则，允许在句尾添加逗号："trailingComma": "all",

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "no-console": "off",
      "prettier/prettier": [
        "error",
        {
          "singleQuote": true,
          "trailingComma": "all",
          "bracketSpacing": true,
          "jsxBracketSameLine": true
        }
      ]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

3：可以在项目根目录下面的.prettierrc.json 文件中继续配置 prettier：

{
  "singleQuote": true,
  "semi": false
}

 

// "singleQuote": true, 使用单引号而不是双引号 ， "semi": true ,在语句结尾处添加分号,false就是不添加分号

4：保持 eslint与prettier的配置格式一样，代码校验才不会冲突，

项目根目录添加 eslintrc.js 文件：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never'],
    'comma-dangle': ['error', 'always-multiline'], // 多行对象字面量项尾总是有逗号
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
}