让Visual Studio Code按照ESLint规则格式化你的代码

项目加入ESLint之后,大家的代码是工整了许多. 但是因为刚刚不熟悉ESLint的规则,很多时候都在数进退多少空格,双引号还是单引号的删改切换.

严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!!

重要的事情说三遍!!!

下面介绍一种利用Visual Studio Code ESLint插件,配置之后,可以自动格式化成ESLint规定的格式

  1. 在Visual Studio Code 安装 ESLint插件
  2. widnows 点击 文件>首选项>设置 / mac 点击Code>首选项
  3. 搜索 eslint.autoFixOnSave, 找到之后修改为 true

重启你的Visual Studio Code,当你打开代码文件的后,直接保存文件. 代码会自动格式化成ESLint规定的格式.大大的提高了开发效率,并且统一了代码规范

下面分享一下我们项目里的一些ESLint规则

{
  rules: { // 具体规则
    'accessor-pairs': 2, // getter/setter成对出现
    'arrow-spacing': [1, { 'before': true, 'after': true }], // 箭头函数前后有空格
    'array-bracket-spacing': [1, 'never'], // 数组内前后无空格
    'block-spacing': [1, 'always'], // 单行{}前后有空格
    'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // {}换行,单行不用
    'camelcase': [2, { 'properties': 'never' }], // 属性名可以不是驼峰
    'comma-dangle': [1, 'only-multiline'], // 数组/对象最后一个必须有,
    'comma-spacing': [1, { 'before': false, 'after': true }], // ,前有空格, 后无空格
    'comma-style': [2, 'last'], // ,在最后,不能换行
    'constructor-super': 1, // super()在必须构造函数内
    'curly': [2, 'multi-line'], // if/while等函数可以多行不带{}
    'dot-location': [2, 'property'], // .的位置可以在换行
    'eol-last': 1, // 文件末尾需要空白行
    'eqeqeq': [2, 'allow-null'], // 必须===, null除外
    'generator-star-spacing': [2, { 'before': true, 'after': true }], // generator函数前后有空格
    'handle-callback-err': [2, '^(err|error)$' ], // 有err/error必须处理异常
    'indent': [2, 2, { 'SwitchCase': 1 }], // 缩进2格,switch中1格
    'jsx-quotes': [2, 'prefer-single'], // jsx属性用单引号
    'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象属性前有空格, 后无空格
    'keyword-spacing': [2, { 'before': true, 'after': true }], // 关键词前后有空格, 如if-else
    'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // new后必须大写开头构造函数, 大写开头不一定要new
    'new-parens': 2, // new的构造函数必须带参数
    'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 对象{}前后有空格, 对象内的对象例外
    'no-array-constructor': 2, // Array(10)->yes, Array(1, 2)->no
    'no-caller': 2, // 禁止caller/callee
    'no-class-assign': 2, // 禁止赋值class
    'no-cond-assign': 2, // 条件不能有赋值
    'no-const-assign': 2, // 禁止赋值常量(const)
    'no-control-regex': 2, // reg中不能有控制符号
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1, // node环境prod禁用
    'no-delete-var': 2, // 不能delete变量,可以用在对象
    'no-dupe-args': 2, // 参数不能重复
    'no-dupe-class-members': 2, // class中方法不能有重复
    'no-dupe-keys': 2, // 对象key不能重复
    'no-duplicate-case': 2, // switch不能有重复case
    'no-empty-character-class': 2, // reg中不能有空字符串
    'no-empty-pattern': 2, // 解构不能有空解构模式
    'no-eval': 2, // 不能用eval
    'no-ex-assign': 2, // 不能复制catch中的error
    'no-extend-native': 2, // 不能扩展Object原型
    'no-extra-bind': 2, // bind的函数体中要有明确的this
    'no-extra-boolean-cast': 2, // 禁止多余的Boolean转换
    'no-extra-parens': [2, 'functions'], // 函数中禁止多余的括号
    'no-fallthrough': 2, // switch需要break
    'no-floating-decimal': 2, // float中0不能省略
    'no-func-assign': 2, // 禁止赋值函数
    'no-implied-eval': 2, // 禁止隐性eval
    'no-inner-declarations': [2, 'functions'], // 禁止在条件中声明function
    'no-invalid-regexp': 2, // 禁止无用的reg
    'no-irregular-whitespace': 2, // 禁止不规则空格
    'no-iterator': 2, // 禁止使用__iterator__属性
    'no-label-var': 2, // 禁止label var
    'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], // 禁止label表达式
    'no-lone-blocks': 2, // 禁止无用的{}
    'no-mixed-spaces-and-tabs': 2, // space和tab不混用
    'no-multi-spaces': 2, // 禁止多空格
    'no-multi-str': 2, // 禁止多行的string
    'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止多空行,最大1行
    'no-native-reassign': 2, // 禁止赋值原生对象(window/Object...)
    'no-negated-in-lhs': 2, // !(key in object)->yes, !key in object->no
    'no-new-object': 2, // new Object()->no
    'no-new-require': 2, // new require(xxx)->no
    'no-new-symbol': 2, // new Symbol(xxx)->no
    'no-new-wrappers': 2, // String/Number等不能用new
    'no-obj-calls': 2, // 禁止calling全局对象属性,如Math/JSON
    'no-octal': 2, // 禁止八进制文字
    'no-octal-escape': 2, // 禁止八进制转义
    'no-path-concat': 2, // __dirname和__filename禁止string拼接
    'no-proto': 2, // 禁止使用__proto__
    'no-redeclare': 2, // 禁止重新复制var
    'no-regex-spaces': 2, // 禁止reg出现多个空格
    'no-return-assign': [2, 'except-parens'], // 禁止return中赋值
    'no-self-assign': 2, // 禁止自身赋值
    'no-self-compare': 2, // 禁止自身比较, 如果NaN->Number.isNaN
    'no-sequences': 2, // 禁止,操作符
    'no-shadow-restricted-names': 2, // 禁止跟踪严格模式下部分关键词
    'no-spaced-func': 2, // function的()不要空格
    'no-sparse-arrays': 2, // array不能用空元素
    'no-this-before-super': 2, // super()前不能用this
    'no-throw-literal': 2, // 禁止直接throw内容,必须是Error()
    'no-trailing-spaces': 1, // 禁止多余的空格
    'no-undef': 2, // 禁止使用未赋值变量
    'no-undef-init': 2, // 变量不能初始化为undefined
    'no-unexpected-multiline': 2, // 禁止有疑义的多行表达式
    'no-unmodified-loop-condition': 2, // 循环中的变量要在循环中修改
    'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止不必要的三元操作符
    'no-unreachable': 2, // return/throw等之后不应有表达式
    'no-unsafe-finally': 2, // 禁止不安全的finally
    'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }], // 禁止不使用的变量,参数可以
    'no-useless-call': 2, // 禁止无用的call
    'no-useless-computed-key': 2, // 禁止无用的计算属性
    'no-useless-constructor': 2, // 禁止无用的constructor
    'no-whitespace-before-property': 2, // 属性前不能有空格
    'no-with': 2, // 禁用with
    'one-var': [2, { 'initialized': 'never' }], // 只能一个var, 初始化不检查
    'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 操作符换行, 默认在行末, ?和:在下一行前
    'padded-blocks': [2, 'never'], // 作用域中没有padded的空行
    'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], // 使用单引号, 转义或者模版可以例外
    'semi': [2, 'never'], // 禁用结尾;
    'semi-spacing': [2, { 'before': false, 'after': true }], // ;前有空格, 后无空格
    'space-before-blocks': [2, 'always'], // 作用域前有空格
    'space-in-parens': [2, 'never'], // 括号内无空格
    'space-infix-ops': 2, // 插入的操作符需要空格, 如+/-
    'space-unary-ops': [2, { 'words': true, 'nonwords': false }], // 操作符单词类要空格(new/delete), 非单词不要空格(++/--/!)
    'spaced-comment': [2, 'always', { 'markers': ['!', ',', '/', '-'] }], // 注释要空格,markers为例外
    'template-curly-spacing': [2, 'never'], // 模版字符串中变量无空格
    'use-isnan': 2, // 使用isNaN
    'valid-typeof': 2, // typeof的字符串必须正确
    'wrap-iife': [2, 'any'], // 立即调用的function必须有括号
    'yield-star-spacing': [2, 'both'], // yield的*前后有空格
    'yoda': [2, 'never'], // 条件中变量在前
    'prefer-const': 0, // 能用const场景用const
    'no-useless-escape': 0, // 不检查escape
    'space-before-function-paren': 0, // 函数括号无空格
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }
}

本文链接:

https://alili.tech/archive/153fb3f5/