eslint 相关配置及自动修复

eslint 相关配置及自动修复

Author: huyikai

nodejseslintconfiguration

项目开发的整个流程中，保持代码风格的统一是非常重要的。很难硬性要求每个开发人员改变自己的开发习惯，所以需要借助工具的帮助。在工具的使用中也能潜移默化的影响开发人员的开发习惯，逐渐向正确的方向靠拢。

  1. 安装 vsCode 插件 EsLint Vetur 插件。

    安装 Vetur 是因为 Eslint 不能修改 vue 模版，JSX 语法。所以要通过 Vetur。

  2. 为项目安装EsLint依赖，注意要安在开发依赖中 即 devDependencies 中。

  3. 在项目的根目录下添加.eslintrc.js，用于校验代码格式，根据项目情况，自行编写校验规则。

    module.exports = {
      root: true,
      env: {
        node: true
      },
      'extends': [
        'plugin:vue/vue3-essential',
        'eslint:recommended'
      ],
      parserOptions: {
        parser: 'babel-eslint'
      },
      rules: {
        'quotes': [1, 'single'],// 单引号
        'semi': [2, 'always'], // 语句强制分号结尾
        "comma-dangle": ["error", "never"],
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-unused-vars': 'off'
      }
    }

  4. 修改 vsCode 设置文件 settings.json ，增加如下代码。

    //实现保存时自动根据规则修复问题
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
       "javascript",
       "vue",
       "html"
    ],
    //vetur 代码格式化配置，主动通过右键或者 alt+shift+f 格式化代码时的配置
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            //设置分号
            "semi": true,
            //双引号变单引号
            "singleQuote": true
        },
        "prettier": {
            //设置分号
            "semi": true,
            //双引号变成单引号
            "singleQuote": true,
            //禁止行尾添加逗号
            "trailingComma": "none"
        }
    },