项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged+husky

1. 项目搭建

2. 配置ESLint

@eslint/create-config eslint配置文件初始化工具

pnpm install -D eslint @eslint/create-config

 npm install -D eslint @eslint/create-config

yarn add -D eslint @eslint/create-config 

三种方式，选择一种 

如果不成功的话

npm install eslint --save-dev 

生成配置文件

npx eslint --init 

 配置选择

# 选择2 我们会使用 prettier 进行代码风格校验
How would you like to use ESLint?
1.只检查语法
2.检查语法并提示问题
3.检查语法、提示问题并且强制使用一些代码风格
​
# 你的项目用的哪一种模块化方式 选择1
What type of modules does your project use?
1.ES6
2.CommonJS
3.None
​
# 使用的框架 选择2
Which framework does your project use?
1.React
2.Vue.js
3.None
​
# 项目是否使用TS yes
Does your project use TypeScript?
​
# 项目在哪里跑的 选择1
Where does your code run?
1.browser
2.node
​
# 项目用哪种配置文件 选择1
What format do you want your config file to be in?
1.JavaScript
2.YAML
3.JSON
 

新建eslint配置文件 ，文件名称可以为：.eslintrc.js   或者  .eslint.config.js

在rules中配置规则

module.exports = {
   // 使 eslint 支持 node 与 ES6
   env: {
      browser: true,
      es2021: true,
      node: true,
   },
   // 引入推荐的语法校验规则
   extends: [
      'plugin:vue/vue3-recommended',
      'plugin:@typescript-eslint/recommended',
   ],
   overrides: [],
   // 选择使用的解析器
   parser: 'vue-eslint-parser',
   // 解析器的详细配置
   parserOptions: {
      // 使用最新版 ES 语法
      ecmaVersion: 'latest',
      // 使用 ESLint TS 解析器
      parser: '@typescript-eslint/parser',
      // 使用 ES 模块化规范
      sourceType: 'module',
   },
   // 使用的插件
   plugins: ['vue', '@typescript-eslint'],
   // 自定义规则
   rules: {},
};

在package.json文件中配置

"scripts": {
    "lint:eslint": "eslint --cache --max-warnings 0 {src,mock}/**/*.{vue,ts,tsx} --fix",
},

新建.eslintignore进行配置，配置忽略文件

node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

根目录下配置   /.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

3.配置Prettier

使用pnpm、npm、yarn安装

npm install -D prettier