nuxt3项目中使用eslint和prettier+commitlint附常用规则配置

luck_lin

已于 2024-09-02 12:51:19 修改

阅读量5.1k

点赞数 5

分类专栏： Web technology 文章标签： eslint prettier nuxt3

于 2022-03-31 13:20:55 首次发布

本文链接：https://blog.csdn.net/qwe502763576/article/details/123867837

版权

Web technology 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、初始化eslint

首先创建一个nuxt3项目
执行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 TypeScript? · 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": {
    }
}
```
安装上面提示的依赖yarn add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
在packahe.json的scripts中添加"lint": "eslint . --ext .ts,.vue"然后使用yarn lint用来测试eslint是否生效
虽然nuxt3默认支持了typescript，但是用eslint还是提示Cannot find module ‘typescript’，所以需要再安装typescript依赖yarn add -D typescript
再次执行yarn lint发现eslint已经生效了，正确检验出了代码格式问题

二、针对nuxt3的配置

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

三、配合prettier

安装：yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
现在去尝试重新编辑一下代码然后ctrl+s保存发现已经会自动格式化了

设置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 //标签换行后>单独一行
      }
    ]
  }
}

四、代码commit前验证eslint和commitlint

安装：yarn add husky lint-staged -D
执行：npx husky-init && yarn和npx husky add .husky/pre-commit 'npx lint-staged'
检查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 .",
修改"lint-staged"："lint-staged": { "*.{js,jsx,vue,ts,tsx}": [ "yarn lint:fix" ] }
到这commit前验证eslint就完成了，下面继续commitlint
安装：yarn add -D @commitlint/cli @commitlint/config-conventional
配置package: "commitlint": { "extends": [ "@commitlint/config-conventional" ] }
执行：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
配置完成，提交代码测试一下吧

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

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}], //禁止在逗号前使用空格，要求在逗号后使用空格
}

prettier

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