前端规范ESLint之Git工作流规范 Husky + lint-staged + commitlint（上篇）

npm install eslint --save-dev

npm init @eslint/config
or
npx eslint --init

// 选择配置
√ How would you like to use ESLint? · > problems    
√ What type of modules does your project use? · > esm
√ Which framework does your project use? · > vue （什么框架选什么）
√ Does your project use TypeScript? · > No / Yes(ts项目就选Yes)
√ Where does your code run? · > browser (一般都选择browser浏览器上运行)
√ What format do you want your config file to be in? · > JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · > No / Yes （这里选Yes）

// eslint-disable-next-line no-undef
module.exports = {
    root: true, //默认情况下，ESLint 会在所有⽗级⽬录⾥寻找配置⽂件，⼀直到根⽬录。如果发现配置⽂件中有 “root”: true，它就会停⽌在⽗级
    'env': {
        'browser': true,
        'es2021': true,
        'vue/setup-compiler-macros': true
    },
    'parser': 'vue-eslint-parser',
    'extends': [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:@typescript-eslint/recommended'
    ],
    'parserOptions': {
        'ecmaVersion': 'latest',
        'parser': '@typescript-eslint/parser',
        'sourceType': 'module'
    },
    'plugins': [
        'vue',
        '@typescript-eslint'
    ],
    /**
    *  自定义规则
    *  rules配置文档：http://eslint.cn/docs/rules/
    *  rules配置文档：http://eslint.cn/docs/user-guide/configuring#configuring-rules
    * 【】基本使用方式
    *  "off" 或者0 关闭规则
    *  "warn" 或者1 将规则打开为警告（不影响退出代码）
    *  "error" 或者2 将规则打开为错误（触发时退出代码为1）
    *  如：'no-restricted-syntax': 0, // 表示关闭该规则
    * 【】如果某项规则，有额外的选项，可以通过数组进行传递，而数组的第一位必须是错误级别。如0,1,2
    *  如 'semi': ['error', 'never'], never就是额外的配置项
    */
    "rules": {
      // --以下是Possible Errors JS代码中的逻辑错误相关
      'no-extra-parens': 'error', // 禁止不必要的括号
      // "no-console": "error" // 不允许打印console.log
      'no-template-curly-in-string': 'error', // 禁止在常规字符串中出现模板字符串语法${xxx}
      // --以下是Best Practices 最佳实践
      'default-case': 'error', // 强制switch要有default分支
      'dot-location': ['error', 'property'], // 要求对象的点要跟属性同一行
      'eqeqeq': 'off', // 要求使用 === 和 !==
      'no-else-return': 'error', // 禁止在else前有return，return和else不能同时存在
      'no-empty-function': 'error', // 禁止出现空函数，有意而为之的可以在函数内部加条注释
      'no-multi-spaces': 'error', // 禁止出现多个空格，如===前后可以有一个空格，但是不能有多个空格
      'no-multi-str': 'error', // 禁止出现多行字符串，可以使用模板字符串换行
      'no-self-compare': 'error', // 禁止自身比较
      'no-unmodified-loop-condition': 'error', // 禁止一成不变的循环条件，如while条件，防止死循环
      'no-useless-concat': 'off', // 禁止没有必要的字符串拼接，如'a'+'b'应该写成'ab'
      'require-await': 'error', // 禁止使用不带await的async表达式
      // --以下是Stylistic Issues 主观的代码风格
      'array-element-newline': ['error', 'consistent'], // 数组元素要一致的换行或者不换行
      'block-spacing': 'error', // 强制函数/循环等块级作用域中的花括号内前后有一个空格（对象除外）
      // 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }], // if/elseif/else左花括号要跟if..同行，右花括号要换行；或者全部同一行
      'comma-dangle': ['error', 'only-multiline'], // 允许在对象或数组的最后一项（不与结束括号同行）加个逗号
      'comma-spacing': 'error', // 要求在逗号后面加个空格，禁止在逗号前面加一个空格
      'comma-style': 'error', // 要求逗号放在数组元素、对象属性或变量声明之后，且在同一行
      'computed-property-spacing': 'error', // 禁止在计算属性中出现空格，如obj[ 'a' ]是错的，obj['a']是对的
      'eol-last': 'error', // 强制文件的末尾有一个空行
      'func-call-spacing': 'error', // 禁止函数名和括号之间有个空格
      'function-paren-newline': 'error', // 强制函数括号内的参数一致换行或一致不换行
      'implicit-arrow-linebreak': 'error', // 禁止箭头函数的隐式返回 在箭头函数体之前出现换行
      'indent': ['error', 2], // 使用一致的缩进，2个空格
      'jsx-quotes': 'error', // 强制在jsx中使用双引号
      'key-spacing': 'error', // 强制对象键值冒号后面有一个空格
      'lines-around-comment': 'error', // 要求在块级注释/**/之前有一个空行
      'multiline-comment-style': 'error', // 多行注释同一个风格，每一行前面都要有*
      'new-cap': 'error', // 要求构造函数首字母大写
      'newline-per-chained-call': ['error', { 'ignoreChainWithDepth': 2 }], // 链式调用长度超过2时，强制要求换行
      'no-lonely-if': 'error', // 禁止else中出现单独的if
      'no-multiple-empty-lines': 'error', // 限制最多出现两个空行
      'no-trailing-spaces': 'error', // 禁止在空行使用空白字符
      'no-unneeded-ternary': 'error', // 禁止多余的三元表达式，如a === 1 ? true : false应缩写为a === 1
      'no-whitespace-before-property': 'error', // 禁止属性前有空白，如console. log(obj['a'])，log前面的空白有问题
      'nonblock-statement-body-position': 'error', // 强制单行语句不换行
      // 'object-curly-newline': ['error', { 'multiline': true }], // 对象数属性要有一致的换行，都换行或都不换行
      'object-curly-spacing': ['error', 'always'], // 强制对象/解构赋值/import等花括号前后有空格
      'object-property-newline': ['error', { 'allowAllPropertiesOnSameLine': true }], // 强制对象的属性在同一行或全换行
      'one-var-declaration-per-line': 'error', // 强制变量初始化语句换行
      'operator-assignment': 'error', // 尽可能的简化赋值操作，如x=x+1 应简化为x+=1
      'quotes': ['error', 'single'], // 要求字符串尽可能的使用单引号
      'semi': ['error', 'always'], // 不要分号
      'semi-spacing': 'error', // 强制分号后面有空格，如for (let i=0; i<20; i++)
      'semi-style': 'error', // 强制分号出现在句末
      'space-before-blocks': 'error', // 强制块（for循环/if/函数等）前面有一个空格，如for(...){}是错的，花括号前面要空格：for(...) {}
      'space-infix-ops': 'error', // 强制操作符（+-/*）前后有一个空格
      'spaced-comment': 'error', // 强制注释（//或/*）后面要有一个空格
      // --以下是ECMAScript 6 ES6相关的
      'arrow-body-style': 'error', // 当前头函数体的花括号可以省略时，不允许出现花括号
      'arrow-parens': ['error', 'as-needed'], // 箭头函数参数只有一个时，不允许写圆括号
      'arrow-spacing': 'error', // 要求箭头函数的=>前后有空格
      'no-confusing-arrow': 'error', // 禁止在可能与比较操作符混淆的地方使用箭头函数
      'no-duplicate-imports': 'error', // 禁止重复导入
      'no-useless-computed-key': 'error', // 禁止不必要的计算属性，如obj3={['a']: 1},其中['a']是不必要的，直接写'a'
      'no-var': 'error', // 要求使用let或const，而不是var
      'object-shorthand': 'error', // 要求对象字面量使用简写
      'prefer-const': 'error', // 要求使用const声明不会被修改的变量
      'prefer-destructuring': ['error', {
          'array': false,
          'object': true
      }, { 'enforceForRenamedProperties': false }], // 要求优先使用结构赋值,enforceForRenamedProperties为true将规则应用于重命名的变量
      'prefer-template': 'error', // 使用模板字符串，而不是字符串拼接
      'rest-spread-spacing': 'error', // 扩展运算符...和表达式之间不允许有空格，如... re1错误，应该是...re1
      'template-curly-spacing': 'error', // 禁止模板字符串${}内前后有空格
  }
}

"scripts": {
  "dev": "cross-env NODE_ENV="development" PORT="3001" STATIC_DIR="static" node server.mjs",
  "build": "cross-env NODE_ENV=production gulp",
  "pre": "cross-env NODE_ENV=preproduction gulp",
  "test": "echo "Error: no test specified" && exit 1",
  "debug": "cross-env NODE_ENV=development node --inspect-brk ./gulpfile.js",
  "lint:js": "eslint --ext ".js,.vue,.jsx,.tsx" src --cache --cache-location "./node_modules/.cache/.eslintcache"",
  "lint:css": "npx stylelint "src/**/*.{html,css,less,sass,scss,vue}" --cache --cache-location ./node_modules/.cache/.stylelintcache --rd",
  "lint": "npm run lint:js && npm run lint:css",
  "lint:fix": "npm run lint:js -- --fix & npm run lint:css -- --fix",
  "prepare": "husky install"
},

// 参数解释，更多内容看本文最后参考文档
/*
--ext : 指定后缀文件，告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 --ext 命令行选项指定一个逗号分隔的扩展名列表。注意，该标记只在与目录一起使用时有效，如果使用文件名或 glob 模式，它将会被忽略，简单的说，使用--ext是指定文件后缀，并且后面要跟文件目录
"src" : 限制哪个目录下
-- fix : 根据配置好的规则尝试自动修复
Caching:
  --cache                        仅检查已更改的文件-默认值：false
  --cache-file path::String      缓存文件的路径，不推荐使用：使用--cache-location - 默认值：.eslintcache
  --cache-location path::String  缓存文件或目录的路径
*/

eslint [options] file.js [file.js] [dir]

Basic configuration:
  --no-eslintrc                  禁止使用配置文件.eslintrc.*
  -c, --config path::String      指定使用.eslintrc.*配置文件的路径（可以不是这个名字）
  --env [String]                 指定环境
  --ext [String]                 指定JavaScript文件扩展名，默认值：.js
  --global [String]              定义全局变量
  --parser String                指定解析器
  --parser-options Object        指定解析器配置
  --resolve-plugins-relative-to path::String  应该从中解析插件的文件夹，默认为CWD

Specifying rules and plugins:
  --rulesdir [path::String]      使用其他规则的目录
  --plugin [String]              指定插件
  --rule Object                  指定规则

Fixing problems:
  --fix                          自定修复eslint问题
  --fix-dry-run                  自动修复问题但不保存对文件的更改
  --fix-type Array               指定要应用的修复类型（问题、建议、布局）

Ignoring files:
  --ignore-path path::String     指定忽略的路径 即指定一个文件作为.eslintignore
  --no-ignore                    禁用忽略文件和模式的使用
  --ignore-pattern [String]      要忽略的文件模式（除了.eslintignore中的文件）

Using stdin:
  --stdin                        <STDIN>上提供的Lint代码-默认值：false
  --stdin-filename String        指定STDIN的文件名

Handling warnings:
  --quiet                        仅报告错误-默认值：false
  --max-warnings Int             触发退出代码的警告次数-默认值：-1

Output:
  -o, --output-file path::String  指定要将报告写入的文件
  -f, --format String            使用特定的输出格式-默认值：stylish
  --color, --no-color            强制启用/禁用颜色

Inline configuration comments:
  --no-inline-config             防止注释更改配置或规则
  --report-unused-disable-directives  添加错误信息给未被使用的eslint-disable指令

Caching:
  --cache                        仅检查已更改的文件-默认值：false
  --cache-file path::String      缓存文件的路径，不推荐使用：使用--cache-location - 默认值：.eslintcache
  --cache-location path::String  缓存文件或目录的路径

Miscellaneous:
  --init                         运行配置初始化向导-默认值：false
  --debug                        输出调试信息
  -h, --help                     显示help文档
  -v, --version                  输出版本号
  --print-config path::String    打印给定文件的配置

node_modules
.vscode
types
public
pre
dist