[JavaScript知识库]vue项目接入eslint、prettier、husky+lint-staged

引言

????在vue-cli官方的脚手架创建项目时，会自动让选择Eslint+Prettier，如果是老项目想接入，那么按照下面步骤接入即可

eslint安装

npm i -D eslint eslint-loader babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

eslint配置

????在项目的根目录下，新建.eslintrc.js文件，并将下面代码拷贝进去

module.exports = {
  root: true,
  parserOptions: {
    // 定义ESLint的解析器
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  // 指定代码的运行环境
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    //继承 vue 的标准特性
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  // 自定义eslint规则，严格按照StandardJS
  rules: {
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
    'vue/valid-v-model': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    // 两个空格缩进
    indent: [
      2,
      2,
      {
        SwitchCase: 1
      }
    ],
    // 单引号
    quotes: [
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true
      }
    ],
    // 未使用的变量
    'no-unused-vars': [
      2,
      {
        vars: 'all',
        args: 'after-used'
      }
    ],
    // 关键字前后空格
    'keyword-spacing': [
      2,
      {
        before: true,
        after: true
      }
    ],
    // function关键字和函数名后面的空格
    'space-before-function-paren': 0,
    // 除了null,其他用===而不是==
    eqeqeq: ['error', 'always', { null: 'ignore' }],
    // 字符串拼接操作符直接用空格
    'space-infix-ops': 2,
    // 逗号前面不用空格，逗号后面用空格
    'comma-spacing': [
      2,
      {
        before: false,
        after: true
      }
    ],
    // else必须和反花括号一行
    'brace-style': [
      2,
      '1tbs',
      {
        allowSingleLine: true
      }
    ],
    // 多行 if 语句的的括号不能省
    curly: [2, 'multi-line'],
    // 使用浏览器全局变量时加上 window. 前缀
    'no-undef': 2,
    // 不允许有连续多行空行
    'no-multiple-empty-lines': [
      2,
      {
        max: 1
      }
    ],
    // 换行符在运算符的位置
    'operator-linebreak': [
      2,
      'after',
      {
        overrides: {
          '?': 'before',
          ':': 'before'
        }
      }
    ],
    // 条件语句中赋值语句
    'no-cond-assign': 2,
    // 单行代码块两边加空格
    'block-spacing': [2, 'always'],
    // 对属性名强制使用驼峰
    camelcase: [
      0,
      {
        properties: 'always'
      }
    ],
    // 不允许有多余的行末逗号
    'comma-dangle': [2, 'never'],
    // 始终将逗号置于行末
    'comma-style': [2, 'last'],
    // 点号操作符须与属性需在同一行
    'dot-location': [2, 'property'],
    // 函数调用时标识符与括号间不留间隔
    'func-call-spacing': ['error', 'never'],
    // 键值对当中冒号与值之间要留空白
    'key-spacing': [
      2,
      {
        beforeColon: false,
        afterColon: true
      }
    ],
    // 构造函数要以大写字母开头, 但调用大写字母开头的函数不一定需要new
    'new-cap': [
      2,
      {
        newIsCap: true,
        capIsNew: false
      }
    ],
    // 无参的构造函数调用时要带上括号
    'new-parens': 2,
    // 对象中定义了存值器，一定要对应的定义取值器
    'accessor-pairs': 2,
    // 子类的构造器中一定要调用 super
    'constructor-super': 2,
    // 使用数组字面量而不是构造器
    'no-array-constructor': 'error',
    // 避免使用 arguments.callee 和 arguments.caller
    'no-caller': 2,
    // 避免对类名重新赋值
    'no-class-assign': 2,
    // 避免修改使用 const 声明的变量
    'no-const-assign': 2,
    // 正则中不要使用控制符
    'no-control-regex': 'error',
    // 不要对变量使用 delete 操作。
    'no-delete-var': 2,
    // 不要定义冗余的函数参数
    'no-dupe-args': 2,
    // 类中不要定义冗余的属性
    'no-dupe-class-members': 2,
    // 对象字面量中不要定义重复的属性
    'no-dupe-keys': 2,
    // switch 语句中不要定义重复的 case 分支
    'no-duplicate-case': 2,
    // 同一模块有多个导入时一次性写完
    'no-duplicate-imports': 'error',
    // 正则中不要使用空字符
    'no-empty-character-class': 2,
    // 不要解构空值
    'no-empty-pattern': 2,
    //
    'no-eval': 2,
    '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': 'off',
    '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-new-func': 'error',
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-sparse-arrays': 2,
    'no-template-curly-in-string': 'error',
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef-init': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [
      2,
      {
        defaultAssignment: false
      }
    ],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unsafe-negation': 'error',
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-escape': 0,
    'no-useless-rename': 2,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'padded-blocks': [2, 'never'],
    'rest-spread-spacing': ['error', 'never'],
    'semi-spacing': [
      2,
      {
        before: false,
        after: true
      }
    ],
    'space-before-blocks': [2, 'always'],
    'space-in-parens': [2, 'never'],
    'space-unary-ops': [
      2,
      {
        words: true,
        nonwords: false
      }
    ],
    'spaced-comment': [
      2,
      'always',
      {
        markers: [
          'global',
          'globals',
          'eslint',
          'eslint-disable',
          '*package',
          '!',
          ','
        ]
      }
    ],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    yoda: [2, 'never'],
    // 分号
    semi: [2, 'never'],
    'no-unexpected-multiline': 2,
    'arrow-spacing': [
      2,
      {
        before: true,
        after: true
      }
    ],
    'eol-last': 2,
    'generator-star-spacing': [
      2,
      {
        before: true,
        after: true
      }
    ],
    'handle-callback-err': [2, '^(err|error)$'],
    'jsx-quotes': [2, 'prefer-single'],
    'no-array-constructor': 2,
    'no-console': 'off',
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-useless-constructor': 2,
    'one-var': 0,
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [
      2,
      'always',
      {
        objectsInObjects: false
      }
    ],
    'array-bracket-spacing': [2, 'never']
  },
  //当使用第三方的SDK时，eslint会报找不到，可以加入到globals，取消对这个的检查
  globals: {
    fengmap: true
  }
}

????在项目的根目录下，新建.eslintignore文件，配置要忽略的文件

build
node_modules
public

prettier安装

npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

prettier配置

????在项目的根目录下，新建.prettierrc.js文件，并将下面代码拷贝进去

module.exports = {
  // 最大长度160个字符
  printWidth: 160,
  // 行末分号
  semi: false,
  // 单引号
  singleQuote: true,
  // JSX双引号
  jsxSingleQuote: false,
  // 尽可能使用尾随逗号（包括函数参数）
  trailingComma: 'none',
  // 在对象文字中打印括号之间的空格。
  bracketSpacing: true,
  // > 标签放在最后一行的末尾，而不是单独放在下一行
  jsxBracketSameLine: false,
  // 箭头圆括号
  arrowParens: 'avoid',
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 缩进
  tabWidth: 2,
  // 使用tab还是空格
  useTabs: false,
  // 行尾换行格式
  endOfLine: 'auto',
  HTMLWhitespaceSensitivity: 'ignore'
}

vscode插件安装

????安装Eslint、Prettier、Vetur插件

vscode配置

????找到eslint的settings.json文件，并将下面代码拷贝进去

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "git.autofetch": true,
  "editor.quickSuggestions": null,
  "kite.showWelcomeNotificationOnStartup": false,
  "workbench.editor.untitled.hint": "hidden" // 两个选择器中是否换行
}

????在vscode中Vetur也有一套Format规则，因此会和prettier冲突，找到Vetur的Format将Vetur改成Prettier就好了

husky lint-staged安装

npm i -D husky lint-staged

husky lint-staged配置

????配置git commit校验，打开package.json，添加如下代码

  "scripts": {
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.js": "eslint --ext .js",
    "**/*.vue": "eslint --ext .vue",
    "src/**/*.scss": "stylelint --syntax scss && stylelint --fix scss"
  },

????注意在husky高版本中弃用了此配置方法。此处husky:1.2.2，lint-staged: ^10.5.3