客户管理系统开发定制nuxt3项目中使用eslint和prettier+commitlint附常用规则配置

一、初始化

1. 客户管理系统开发定制首先创建一个nuxt3项目

2. 执行npx eslint --init客户管理系统开发定制初始化一个.eslintrc.js客户管理系统开发定制并自动安装相关依赖，客户管理系统开发定制可参考选项:
   You can also run this command directly using ‘npm init @eslint/config’.
   ✔ 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 ? · Yes
   ✔ Where does your code run? · browser
   ✔ What format do you want your config file to be in? · JavaScript
   选择完后给出如下提示：
   Local ESLint installation not found.
   The config that you’ve selected requires the following dependencies:
   eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
   ✔ Would you like to install them now with npm? · No / Yes
   意思是提示需要哪些依赖，并询问你是否现在用npm安装它们，我有强迫症，我使用yarn初始化的项目，所有包我都想用yarn装，我选择No用yarn手动安装，同时项目下生成了.eslintrc.js如下：

   module.exports = {    "env": {        "browser": true,        "es2021": true    },    "extends": [        "eslint:recommended",        "plugin:vue/essential",        "plugin:@typescript-eslint/recommended"    ],    "parserOptions": {        "ecmaVersion": "latest",        "parser": "@typescript-eslint/parser",        "sourceType": "module"    },    "plugins": [        "vue",        "@typescript-eslint"    ],    "rules": {    }}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22

3. 安装上面提示的依赖yarn add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

4. 在packahe.json的scripts中添加"lint": "eslint . --ext .ts,.vue"然后使用yarn lint用来测试eslint是否生效

5. 虽然nuxt3默认支持了typescript，但是用eslint还是提示Cannot find module ‘typescript’，所以需要再安装typescript依赖yarn add -D typescript

6. 再次执行yarn lint发现eslint已经生效了，正确检验出了代码格式问题

二、针对nuxt3的配置

1. 把配置文件中extends项下的"plugin:vue/essential"替换为"plugin:vue/vue3-recommended"(一个是vue2一个是vue3的配置)
2. 安装eslint-plugin-nuxt执行yarn add -D eslint-plugin-nuxt，extends项中增加"plugin:nuxt/recommended"，删除"eslint:recommended"(eslint默认校验)
3. 删除plugins项下的"vue"，同时可以选择性在rules项中增加"vue/multi-word-component-names": 0，nuxt中提倡vue文件和组件使用kebab-case（烤肉串式）风格命名，将该规则设为0关闭校验

三、配合prettier

1. 安装：yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
2. 现在去尝试重新编辑一下代码然后ctrl+s保存发现已经会自动格式化了
3. 设置prettier格式化规则，eslint和prettier结合使用可以直接在eslintrc中配置prettier不需要单独再新建.rettierrc.js了，如下是我最终配置可参考：

   module.exports = {  env: {    browser: true,    es2021: true  },  extends: [    'plugin:prettier/recommended',    'plugin:vue/vue3-recommended',    'plugin:@typescript-eslint/recommended',    'plugin:nuxt/recommended'  ],  parserOptions: {    ecmaVersion: 'latest',    parser: '@typescript-eslint/parser',    sourceType: 'module'  },  plugins: ['@typescript-eslint'],  rules: {  	'vue/multi-word-component-names': 0, //关闭vue文件和组件命名校验  	'vue/singleline-html-element-content-newline': 'off',    'vue/multiline-html-element-content-newline': 'off',    'vue/max-attributes-per-line': 0,    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',    'prettier/prettier': [      'error',      {        printWidth: 140, //代码单行长度        tabWidth: 2, //tab键缩进为2空格        useTabs: false, //使用空格缩进        singleQuote: true, //js单引号        semi: false, //去分号        trailingComma: 'none', //无尾逗号        arrowParens: 'avoid', //箭头函数尽可能省略括号        jsxBracketSameLine: true //标签换行后>单独一行      }    ]  }}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39

四、代码commit前验证eslint和commitlint

1. 安装：yarn add husky lint-staged -D
2. 执行：npx husky-init && yarn和npx husky add .husky/pre-commit 'npx lint-staged'
3. 检查package是否新增scripts:"prepare": "husky install"，和"lint-staged: {...}"项,没有的话手动加一下，同时加入scripts："lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",和 "lint:fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore .",
4. 修改"lint-staged"："lint-staged": { "*.{js,jsx,vue,ts,tsx}": [ "yarn lint:fix" ] }
5. 到这commit前验证eslint就完成了，下面继续commitlint
6. 安装：yarn add -D @commitlint/cli @commitlint/config-conventional
7. 配置package: "commitlint": { "extends": [ "@commitlint/config-conventional" ] }
8. 执行：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
9. 配置完成，提交代码测试一下吧

结尾：附上我整理的常用eslint和prettier配置

1. eslint

   {	"max-len": ["error", { "code": 140 }], //单行最大长度	"no-multi-spaces": "error", // 禁止表达式多个空格 	"semi": ["error", "never"], // 禁止分号	"quotes": ["error", "single"], // 使用单引号	"comma-dangle": ["error", "never"], //禁止尾逗号	"arrow-parens": ["error", "as-needed"], //箭头函数省略括号	"no-trailing-spaces": ["error", { "skipBlankLines": true }], //禁止末尾多余空格	"key-spacing": ["error", { "afterColon": true }], //字面量对象冒号后空格	"object-curly-spacing": ["error", "always"], //字面量对象格式化一致的空格	"comma-spacing": ["error", {"before": false, "after": true}], //禁止在逗号前使用空格，要求在逗号后使用空格}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

2. prettier

   {    printWidth: 140, //代码单行长度    tabWidth: 2, //tab键缩进为2空格    useTabs: false, //使用空格缩进    singleQuote: true, //js单引号    semi: false, //去分号    trailingComma: 'none', //无尾逗号    arrowParens: 'avoid', //箭头函数尽可能省略括号    jsxBracketSameLine: true //标签换行后>单独一行}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

顺便打个广告：稳定飞机你懂的：