分步骤给项目(typescript)添加Eslint prettier lint-staged

eslint 和 lint-staged 现在对于项目已经必不可少了，typescript更是必备，今天来一个步骤一个步骤记录下怎么给项目添加eslint lint-staged

我们已最新Nuxt3为初始项目做demo

感谢Young村长的大力支持 Young村长的B站，快来联系村长加入我们的学习

初始化一个Nuxt3的项目

npx nuxi init nuxt3-demo
cd nuxt3-demo
yarn

第一步： 添加Eslint

eslint中文官方

Eslint 都为我们配置好了

npx eslint --init

按照如图的步骤

1. 选择第二项： 检测代码和找到不符合eslint的部分

2. js标准 选择es6 modules

3. 我们已nuxt3为demo选用vue.js模板

4.使用typesciprt

5.项目的运行环境， 先选择所有

6. eslint配置文件的文件类型

7. 是否直接安装

我们来看下项目

package.json文件变化

{
  ...
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0"
  }
  ...
}

生成了一个.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

这里ecmaVersion: 13 指的是es的版本 为了更通俗些可以改成2021

检测下eslint 是否生效

如果项目中没有安装 typescript 你还需要 yarn add -D typescript

eslint cli中文官网

1. package.json文件里添加 script

"lint": "eslint ."

eslint 默认只检测.js的文件， 所以需要 --ext 来指定文件类型，详情可参考官网

有的时候可能eslint没有及时的生效，可以重新启动下我们的编辑器

2. 根据我们的项目demo,我们变动下我们的lint script

"lint": "eslint . --ext .ts,.vue"

第二步 修改下配置来适配vue3

看下eslint-plugin-vue官方地址

只需要vue的eslint的相关配置改成一个配置就好了

extends里的"plugin:vue/essential", plugins里的vue去掉

module.exports = {
  ...,
  extends: [
    ...,
    'plugin:vue/vue3-recommended',
  ],
  ...
}

第三步 Nuxt3的一些配置

Nuxt3中有很多自己定制的规则，所以需要额外的配置

yarn add -D eslint-plugin-nuxt

修改下.eslintrc.js

...
extends: [
  ...
  'plugin:nuxt/recommended',
]
...

因为Nuxt3的约定规则 需要添加下rules:

rules: { 'vue/multi-word-component-names': 0 }

这样项目最基本的eslint配置就好了

第四步 添加 prettier

1. 你需要安装两个插件

yarn add -D prettier eslint-config-prettier

2. 修改下.eslintrc.js

module.exports = {
  ...,
  extends: [
    ...,
    'prettier',
  ],
  ...
}

3. 创建.prettierrc.js, 内容如下

module.exports = {
  // printWidth: 80,
  // tabWidth: 2,
  // useTabs: false,
  semi: false, // 未尾逗号, default:  true
  singleQuote: true, // 单引号 default: false
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  trailingComma: 'none', // 未尾分号 default: es5    all | none | es5
  // bracketSpacing: true,
  // bracketSameLine: false,
  // jsxBracketSameLine: false,
  arrowParens: 'avoid', // default: always
  // insertPragma: false,
  // requirePragma: false,
  proseWrap: 'never',
  // htmlWhitespaceSensitivity: 'css',
  // vueIndentScriptAndStyle: false,  // .vue 缩进
  endOfLine: 'auto' // default lf
}

paackage.json添加script prettier --write .

第五步 添加Lint-staged husky

yarn add -D lint-staged husky

yarn set-script prepare "husky install"
yarn run prepare

npx husky add .husky/pre-commit "npx lint-staged"

给package.json里修改些相应的内容

 ...
  "lint": "eslint . --ext .ts,.vue --fix"
 ...
 "lint-staged": {
    "*.{ts,vue}": [
      "prettier --write .",
      "npm run lint"
    ]
  }

这样我们的项目就可以eslint、prettier、husky lint-staged结合起来了

总结

1. eslint --init 根据项目情况初始自己的eslint配置
   • 安装的依赖有

   @typescript-eslint/eslint-plugin
   typescript-eslint/parser
   eslint
   eslint-plugin-vue
   

2. vue3项目只需要把.eslintrc文件的用到plugin:vue3/recommended
3. 额外的需求配置：Nuxt3: eslint-plugin-nuxt
4. prettier安装的依赖：eslint-config-prettier
5. Husky 和 lint-staged

翻车校验

1. prettier 有两种方案
   • prettier 和 eslint-config-prettier 配置的化直接.eslintrc.js extends里加上'prettier'
   • 再安装eslint-plugin-prettier(推荐使用) 配置 extends: ['plugin:prettier/recommended']
2. TODO: --fix