Vue3+TS项目中eslint、prettier安装配置详细指南
作者：小迟前端
为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下
前言
eslint和prettier的作用主要为：可以规范团队的代码风格。在实际项目中，团队的每个成员的编码习惯都不同，这极有可能造成，一个项目多个代码风格，这会造成代码阅读困难，后期维护难度大灯问题，这就需要配置下eslint和prettier。
1.eslint
1.安装依赖
首先我们需要先安装 @eslint/create-config 插件：
pnpm install -D @eslint/create-config
提示我未安装eslint，按y，回车安装
Need to install the following packages: eslint@8.57.0 Ok to proceed? (y) y
接下来执行初始化。
npx eslint --init
接下来会有弹出一些问题，可根据自身项目情况进行回答，期间会询问是否需要安装相应插件，y->回车。
2.配置eslintrc
会在项目根目录下生成.eslintrc.cjs文件，然后对项目进行自己需要的配置
module.exports = {
// 使 eslint 支持 node 与 ES6
env: {
browser: true,
es2021: true,
node: true
},
// 引入推荐的语法校验规则
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
overrides: [],
// 这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
// 先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
// 选择使用的解析器
parser: 'vue-eslint-parser',
// 解析器的详细配置
parserOptions: {
// 使用最新版 ES 语法
ecmaVersion: 'latest',
// 使用 ESLint TS 解析器
parser: '@typescript-eslint/parser',
// 使用 ES 模块化规范
sourceType: 'module'
},
// 使用的插件
plugins: ['vue', '@typescript-eslint'],
// 自定义规则
rules: {
'@typescript-eslint/no-unused-vars': 'off',
indent: [
'error',
4,
{
SwitchCase: 1
}
],
'vue/multi-word-component-names': [
'error',
{
ignores: ['index', 'Header'] //需要忽略的组件名
}
],
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-explicit-any': 'off',
semi: 'off',
'@typescript-eslint/no-this-alias': 'off',
'eslintno-debugger': 'off',
'vue/no-unused-vars': 'off',
'vue/no-template-shadow': 'off',
'vue/require-v-for-key': 'off',
'vue/no-textarea-mustache': 'off',
'vue/no-v-html': 'off'
}
};3.配置下忽略文件eslintignore
在根目录下创建.eslintignore文件，排除一些文件夹
node_modules *.md .vscode .idea dist /public /docs .husky .local /bin Dockerfile .eslintrc.js
4.配置package.json
然后配置下package.json中的启动命令，这样便可以执行 pnpm run lint:fix 来进行自动格式化代码。
"scripts": {
"dev": "vite --open",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint:fix": "eslint --fix"
},2 prettier
1.安装 prettier 依赖
pnpm install -D prettier
pnpm install -D eslint-config-prettier eslint-plugin-prettier
2.创建.prettierrc.js 文件
module.exports = {
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2,
"printWidth": 100,
"useTabs": false,
"bracketSameLine": true,
"arrowParens": "always",
"vueIndentScriptAndStyle": false,
"singleAttributePerLine": false
}3.创建 .prettierignore 文件
dist/ node_modules/ .vscode/ .idea/ /public/* .local **/*.svg **/*.sh
4.配置package.json
{
"scripts": {
"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
}
}附：如果ESLint和Prettier在某些规则上有冲突，。比如方法名和后面的括号之间的空格问题。ESLint 规则是添加空格，Prettier则是不添加空格
此时可以考虑在ESlint配置文件中关闭相关检测规则。
1、打开 .eslintrc.js 配置文件
2、在 rules 规则下，新增一条规则
'space-before-function-paren': 'off'
3、重启项目
至此，你即可在 VSCode 保存时，自动格式化代码！
总结
到此这篇关于Vue3+TS项目中eslint、prettier安装配置的文章就介绍到这了,更多相关eslint、prettier安装配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！