vscode 配合 eslint 自动格式化代码

vscode 配合 eslint 自动格式化代码

1. vscode安装eslint插件

2. 打开 vscode 的配置文件—— settings.json

   点击左下角的设置或者输入ctrl+shift+p 找到Open Setting JSON

   安装好以后，打开 vscode 的配置文件—— settings.json ，加上下面这几行规则：

{
  "eslint.autoFixOnSave": true,
  "eslint.packageManager": "yarn",
  "eslint.validate": [
    "javascript",  //  用eslint的规则检测js文件
    {
      "language": "vue",   // 检测vue文件
      "autoFix": true   //  为vue文件开启保存自动修复的功能
    },
    {
      "language": "html",
      "autoFix": true
    },
  ]
}

   在配置 eslint 的 settings.json 时，发现下面飘颜色：

   解决,不用添加 autoFix 字段，它是默认为 true 的。配置如下：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 },
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "vue"
]
}

3. 项目根目录加上 .eslintrc.js 文件

   项目根目录加上 .eslintrc.js 文件
   这个文件就是默认的 eslint 规则的配置文件，我在项目中使用了下面这些：

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint" // 定义ESLint的解析器
  },
  env: {
    browser: true
  },
  // 定义文件继承的子规范
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    "plugin:vue/essential",
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    "standard"
  ],
  // required to lint *.vue files
  plugins: ["vue"], // 定义了该eslint文件所依赖的插件
  // add your custom rules here
  rules: {
    // allow async-await
    "no-console": "off",
    indent: ["error", 2, {
      SwitchCase: 1
    }],
    semi: [2, "always"],
    "space-before-function-paren": [
      "error",
      {
        anonymous: "always",
        named: "never"
      }
    ],
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    'generator-star-spacing': 'off',
    // semi: 'off',
    quotes: ['error', 'single'],
    'object-curly-spacing': ['error', 'always'],
    indent: ['error', 2],
    'arrow-parens': [2, 'always'],
    "comma-dangle": [2, "never"]
  },
  "globals": {
    "$": true,
    "Vue": true,
    "jQuery": true,
    "_get": true,
    "_set": true,
    "_map": true,
    "_has": true,
    "_isEmpty": true,
    "_includes": true,
    "_forEach": true,
    "_findIndex": true,
    "_assign": true,
    "_concat": true,
    "_isNil": true,
    "_omit": true,
    "_pick": true,
    "_findLastIndex": true,
    "_isArray": true,
    "_split": true,
    "_join": true,
    "_last": true,
    "_find": true,
    "_keys": true,
    "AMap": true,
    "echarts": true,
    "AMapUI": true
  }
};

   一旦你配置了规则以后，你打开编辑器在编码的过程中，就会出来编码不规范的提示，如下所示：