规范化之prettier + eslint + editorconfig

prettier

一个流行的代码格式化工具，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。prettier 的检查规则是通过配置文件.prettierrc 实现的， 不过一般来说，只需要配置少部分规则即可。

安装依赖

npm install --save-dev prettier

配置

<!-- .prettierrc.js 或 .prettierrc -->
module.exports = { 
  "printWidth": 120,    // 每行代码长度（默认80）
  "singleQuote": true,  // 使用单引号（默认false）
  "semi": false,    // 声明结尾使用分号(默认true)
  "bracketSpacing": true,   // 对象字面量的大括号间使用空格（默认true）
  "htmlWhitespaceSensitivity": "ignore",    // 空格被认为是不敏感的
  "arrowParens": "avoid",   // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
  "trailingComma": "none",  // 多行使用拖尾逗号（默认none）
  "jsxSingleQuote": false,  // jsx 不使用单引号，而使用双引号
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": false, // 是否使用tab进行缩进（默认false）
  
  <!-- 不常用添加的参数 -->
  "insertSpaceBeforeFunctionParenthesis": false,    // 函数前是否加入空格
  "eslintIntegration": true,    // 让 prettier使用eslint的代码格式进行校验
}

配置 eslint 检测代码风格安装插件

npm i -D eslint-plugin-prettier

配置 .eslintrc.js

<!--"off" -> 0 关闭规则-->
<!--"warn" -> 1 开启警告规则-->
<!--"error" -> 2 开启错误规则-->

module.exports = {
  root: true,   // 这是根文件，不用继续往上查找
  parserOptions: {  // 指定eslint解析器
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {    // 指定环境的全局变量
    browser: true,
    node: true,
    es6: true
  },
  extends: [    // 在已有配置的基础上进行扩展
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    'vue/max-attributes-per-line': [    // 每行最大属性
      2,
      {
        singleline: 10,
        multiline: {
          max: 1,
          allowFirstLine: false
        }
      }
    ],
    'vue/html-indent': 'off',   // 忽略html标签缩进
    'vue/html-self-closing': 'off', // 忽略html标签自闭合
    'vue/singleline-html-element-content-newline': 'off',   // 单行html元素内容在新的一行
    'vue/multiline-html-element-content-newline': 'off',    // 多行html元素内容在新的一行
    'vue/name-property-casing': ['error', 'PascalCase'],    // vue 组件名称必须是大驼峰
    'vue/no-v-html': 'off', // 不使用v-html
    'accessor-pairs': 2,    // 应同时设置setter和getter
    'arrow-spacing': [  // 箭头间距
      2,
      {
        before: true,
        after: true
      }
    ],
    'block-spacing': [2, 'always'], // 块间距
    'brace-style': [    // 大括号样式允许单行
      2,
      '1tbs',
      {
        allowSingleLine: true
      }
    ],
    camelcase: [    //不启用，为属性强制执行驼峰命名的规则
      0,
      {
        properties: 'always'
      }
    ],
    'comma-dangle': [2, 'never'],   // 不允许尾随逗号
    'comma-spacing': [  // 逗号后空格
      2,
      {
        before: false,
        after: true
      }
    ],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    curly: [2, 'multi-line'],   // 当一个块只包含一条语句时，不允许省略花括号
    'dot-location': [2, 'property'],
    'eol-last': 2,  // 非空文件的末尾至少执行一个换行符
    eqeqeq: ['error', 'always', { null: 'ignore' }],
    'generator-star-spacing': [
      2,
      {
        before: true,
        after: true
      }
    ],
    'handle-callback-err': [2, '^(err|error)#39;],
    indent: [   // 缩进风格
      2,
      2,
      {
        SwitchCase: 1
      }
    ],
    'jsx-quotes': [2, 'prefer-double'],
    'key-spacing': [    // 对象字面量中冒号的前后空格
      2,
      {
        beforeColon: false,
        afterColon: true
      }
    ],
    'keyword-spacing': [    // 关键字如if/function前后必须有空格
      2,
      {
        before: true,
        after: true
      }
    ],
    'new-cap': [
      2,
      {
        newIsCap: true,
        capIsNew: false
      }
    ],
    'new-parens': 2,    // new时必须加小括号
    'no-array-constructor': 2,  // 禁止使用数组构造器
    'no-caller': 2, // 禁止使用arguments.caller或arguments.callee
    'no-console': 'off',    // 忽略console规则
    'no-class-assign': 2,   // 不允许修改类声明的变量
    'no-cond-assign': 2, // 不允许在 if、for、while 条件中使用赋值运算符
    'no-const-assign': 2,   // 不能修改使用const关键字声明的变量
    'no-control-regex': 0,  // 不允许正则表达式中的控制字符，忽略这条规则
    'no-delete-var': 2, // 不允许在变量上使用delete操作符
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,  // 不允许空块语句
    'no-eval': 2,   // 不允许使用eval
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,    //禁止重复的函数声明
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [
      2,
      {
        allowLoop: false,
        allowSwitch: false
      }
    ],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [
      2,
      {
        max: 1
      }
    ],
    'no-native-reassign': 2,    // 不能重写native对象
    'no-negated-in-lhs': 2, // in 操作符的左边不能有!
    'no-new-object': 2, // 禁止使用new Object()
    'no-new-require': 2,    // 禁止使用new require
    'no-new-symbol': 2, // 防止Symbol与new 同时使用的意外错误
    'no-new-wrappers': 2,   // 杜绝使用String，Number以及Boolean与new操作
    'no-obj-calls': 2,  // 不允许调用Math，JSON和Reflect对象作为功能
    'no-octal': 2,  // 禁止使用八进制数字
    'no-octal-escape': 2,   // 禁止使用八进制转义序列
    'no-path-concat': 2,    // node中不能使用__dirname或__filename做路径拼接
    'no-proto': 2,  // 禁止使用__proto__属性
    'no-redeclare': 2,  // 禁止重复声明变量
    'no-regex-spaces': 2,   // 禁止在正则表达式字面量中使用多个空格 /foo bar/
    'no-return-assign': [2, 'except-parens'],   // return 除非用圆括号括起来，否则不允许赋值
    'no-self-assign': 2,
    'no-self-compare': 2,   // 不能比较自身
    'no-sequences': 2,  // 禁止使用逗号运算符
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,    // 函数调用时 函数名与()之间不能有空格
    'no-sparse-arrays': 2,  // 禁止稀疏数组， [1,,2]
    'no-this-before-super': 2,  // 在调用super()之前不能使用this或super
    'no-throw-literal': 2,  //禁止抛出字面量错误 throw "error"
    'no-trailing-spaces': 2,    // 一行结束后面不要有空格
    'no-undef': 2,  // 不能有未定义的变量
    'no-undef-init': 2, // 变量初始化时不能直接给它赋值为undefined
    'no-unexpected-multiline': 2,   // 避免多行表达式
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [    // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
      2,
      {
        defaultAssignment: false
      }
    ],
    'no-unreachable': 2,    // 不允许可达代码return，throw，continue，和break语句后面还有语句
    'no-unsafe-finally': 2, // 不允许在finally块使用 return，throw，break，和continue
    'no-unused-vars': [ // 不能有声明后未被使用的变量或参数
      2,
      {
        vars: 'all',
        args: 'none'
      }
    ],
    'no-useless-call': 2,   // 禁止不必要的call和apply
    'no-useless-computed-key': 2,   // 禁止不必要地使用计算属性键
    'no-useless-constructor': 2,    // 在不改变类的工作方式的情况下安全地移除的类构造函数
    'no-useless-escape': 0, // 禁用不必要的转义字符
    'no-whitespace-before-property': 2,
    'no-with': 2,   // 禁用with
    'one-var': [
      2,
      {
        initialized: 'never'
      }
    ],
    'operator-linebreak': [ // 实施一致的换行
      2,
      'after',
      {
        overrides: {
          '?': 'before',
          ':': 'before'
        }
      }
    ],
    'padded-blocks': [2, 'never'],  // 在块内强制执行一致的空行填充
    quotes: [   // 使用 '' 引号，如果字符串中含有 '' 则可以使用 "" 或者 `` 包裹 ''
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true
      }
    ],
    semi: [2, 'never'], // 语句不必分号结尾
    'semi-spacing': [   // 分号前后空格
      2,
      {
        before: false,
        after: true
      }
    ],
    'space-before-blocks': [2, 'always'],   // 块必须至少有一个先前的空间
    'space-before-function-paren': 0,   // 函数定义时括号前面要不要有空格
    'space-in-parens': [2, 'never'],    // 禁止或要求（或）左边的一个或多个空格
    'space-infix-ops': 2,   // 强制二元运算符左右各有一个空格
    'space-unary-ops': [
      2,
      {
        words: true,    // new，delete，typeof，void，yield 左右必须有空格
        nonwords: false // 一元运算符，如：-，+，--，++，!，!!左右不能有空格
      }
    ],
    'spaced-comment': [ // 注释风格
      2,
      'always',
      {
        markers: [
          'global',
          'globals',
          'eslint',
          'eslint-disable',
          '*package',
          '!',
          ','
        ]
      }
    ],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2, // 禁止比较时使用NaN，只能用isNaN()
    'valid-typeof': 2,  // 必须使用合法的typeof的值
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    yoda: [2, 'never'], // 禁止尤达条件
    'prefer-const': 2,  // 首选const
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always'],  // 对象需要大括号内的空格
    'array-bracket-spacing': [2, 'never']   // 不允许数组括号内的空格
  }
}

editorconfig

帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。 vscode 插件配合使用 EditorConfig for vs code。

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true

# 匹配全部文件
[*]

# 设置字符集
charset = utf-8

# 缩进风格，可选 "space"、"tab"
indent_style = space

# 缩进的空格数
indent_size = 2

# 结尾换行符
end_of_line = lf

# 在文件结尾插入新行
insert_final_newline = true

# 删除一行中的前后空格
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false