vscode 使用eslint（保存自动格式化）

╰+攻爆jí腚メ 2022-12-01 05:18 604阅读 0赞

前提：在package.json中安装了eslint的依赖

1.在项目跟目录添加.eslintrc.js 文件

// https://cn.eslint.org/docs/rules/
    // 
    /*
     * "off"或者0，不启用这个规则
     * "warn"或者1，出现问题会有警告
     * "error"或者2，出现问题会报错
     */
    
    module.exports = {
      root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
      env: { //环配置 如 "browser": true, node: true,
        node: true,
      },
      extends: [
        'plugin:vue/essential',
        '@vue/airbnb',
      ],
      rules: {
        'array-callback-return': 1, //return 后面是否允许省略
        "arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
        'consistent-return': 0, //要求 return 语句要么总是指定返回的值，要么不指定
        'camelcase': 0, //强制驼峰法命名
        'eqeqeq': 0, //强制全等( === 和 !==)
        'func-names': 0, //函数表达式必须有名字
        "global-require": 0, // 取消对require的验证，使得可以使用require来加载图片的相对路径
        "import/no-unresolved": 0, // 取消自动解析路径，以此开启alias的别名路径设置
        'import/extensions': 0, // 取消对文件扩展名的验证
        'indent': 'off', //缩进风格(强制使用一致的缩进)
        "linebreak-style": 0, // 取消换行符\n或\r\n的验证()
        'max-len': 0, //字符串最大长度
        "no-unused-vars": 1, //禁止出现未使用过的变量
        "no-redeclare": 1, //禁止多次声明同一变量
        'no-use-before-define': 1, //禁止在变量定义之前使用它们
        "no-unused-expressions": 0, // 允许使用未使用过的表达式，以此来支持a && a()的代码形式
        'no-restricted-syntax': 1, //禁用特定的语法
        'no-plusplus': 1, //禁止使用++，--
        'no-underscore-dangle': 0, // 允许在标识符中使用下划线
        'no-param-reassign': 0, // 禁止对 function 的参数进行重新赋值
        'no-nested-ternary': 0, // 禁止嵌套三元表达式
        'no-else-return': 0, //禁止 if 语句中 return 语句之后有 else 块
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-shadow': [1, { //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
          "allow": ["resolve", "reject", "done", "cb"]
        }],
        'prefer-rest-params': 1, //要求使用剩余参数而不是 arguments
        'prefer-arrow-callback': 0, //要求回调函数使用箭头函数
        'prefer-const': 1, //首选const
        "semi": false, // 使用分号, 默认true
        "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
        "tabWidth": 4, // tab缩进大小,默认为4
        'template-curly-spacing': 'off', //要求或禁止模板字符串中的嵌入表达式周围空格的使用
      },
      parserOptions: {
        parser: 'babel-eslint',
      },
    };

更多配置详见[https://eslint.bootcss.com/docs/rules][https_eslint.bootcss.com_docs_rules]

2.在vscode中添加eslint和vetur插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]

3.配置保存时按eslint规则自动格式化

编辑vscode配置文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1][]

添加如下配置

// 每次保存的时候自动格式化 旧版本配置
      //"editor.formatOnSave": true,
      // 每次保存的时候将代码按eslint格式进行修复
      //"eslint.autoFixOnSave": true,
      // 添加 vue 支持
      //"eslint.validate": [
        "javascript",
      //  "javascriptreact",
      //  {
       //   "language": "html",
      //    "autoFix": true
      //  },
      //  {
      //    "language": "vue",
      //    "autoFix": true
      //  }
      //]
      //新版本配置
      "editor.codeActionsOnSave": {
    		"source.fixAll.eslint": true
    	},
    	"eslint.format.enable": true,

注意：这里的配置你需要注意自己eslint版本

可以看下eslint的详细说明，有如图的配置说明，就使用新版本的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2][]

这样配置完成后保存文件时就会自动格式化了

[https_eslint.bootcss.com_docs_rules]: https://eslint.bootcss.com/docs/rules/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: /images/20221123/de2df676c43b4156aee7cd0eb6c4ade2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1]: /images/20221123/f2871ce0b09a4d0b8ec186c477d04a36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2]: /images/20221123/e82aed59e1d94bf590886247959058a5.png