vue3项目中集成eslint和prettier
阅读数:139 评论数:0
跳转到新版页面分类
html/css/js
正文
一、概述
在 Vue 3 项目中集成 ESLint 和 Prettier 可以帮助你保持代码质量和风格的一致性。
注意 ：以下针对的是eslint 8
二、使用
1、安装eslint
首先，你需要安装 ESLint 以及 Vue 相关的 ESLint 插件。
pnpm install eslint eslint-plugin-vue --save-dev
2、安装prettier
安装 Prettier 以及 ESLint 与 Prettier 结合使用的插件。
pnpm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
3、初始化eslint配置
使用 ESLint 的初始化命令来创建 .eslintrc 配置文件。
pnpm eslint --init
在初始化过程中，选择合适的选项来配置你的 ESLint。
4、配置eslint和prettier
在 .eslintrc 或 .eslintrc.js 文件中，确保你有以下配置来整合 ESLint 和 Prettier。
module.exports = {
root: true,
"env": {
"node": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
// 在最后添加 Prettier 插件
'plugin:prettier/recommended',
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
// 禁用与Prettier冲突的ESLint规则，允许Prettier接管代码的格式化
'prettier/prettier': 'off',
"no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
}
}
eslint --fix 命令不会移除未使用的变量，因为这可能会改变程序的行为。
在 .eslintrc 配置文件中，你可以添加规则选项来允许带有下划线前缀的变量未被使用
{
"rules": {
"no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
}
}
5、创建prettier配置文件
创建一个 .prettierrc 文件来定义 Prettier 的配置，可以根据自己的喜好调整 Prettier 的规则。
{
"singleQuote": true,
"semi": false
}
| "semi": true | 表示每条语句的末尾都会加上分号。 |
| "singleQuote": true | 表示使用单引号而不是双引号。 |
| "trailingComma": "es5" | 表示在 ES5 中有效的地方添加尾随逗号（例如对象或数组字面量）。 |
| "bracketSpacing": true | 表示在对象字面量的括号之间打印空格。 |
| "jsxBracketSameLine": false | 表示在 JSX 中将多行 JSX 元素的 > 放在最后一行的末尾，而不是另起一行（适用于 React 项目，如果你在 Vue 项目中使用 JSX，这也是适用的）。 |
| "arrowParens": "avoid" | 表示在只有一个参数的箭头函数中省略括号。 |
| "tabWidth": 4 | 表示设置缩进宽度为 2 个空格。 |
| "useTabs": true | 表示使用tab而不是空格进行缩进。 |
6、添加脚本到package.json
在 package.json 文件中，添加一个脚本来运行 ESLint。
{
"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix"
}
}
这样你可以使用 pnpm lint 来检查代码问题，使用 pnpm lint:fix 来自动修复一些简单的代码问题。
7、集成到编辑器
如果你使用的是 Visual Studio Code 或其他支持 ESLint 和 Prettier 插件的编辑器，确保安装了这些插件，并且配置编辑器在文件保存时自动格式化代码。
8、运行eslint
最后，运行 ESLint 来检查你的项目中是否有任何问题。
pnpm lint
如果你想自动修复某些问题，可以运行：
pnpm lint:fix