Vue3+TS项目，eslint、prettier安装配置

        eslint和prettier的作用主要为：可以规范团队的代码风格。在实际项目中，团队的每个成员的编码习惯都差异，这极有可能造成，一个项目多个代码风格，这会造成代码阅读困难，后期维护难度大灯问题，这就须要配置下eslint和prettier。
1.eslint

1.安装依赖

首先我们须要先安装 @eslint/create-config 插件：

1. pnpm install -D @eslint/create-config

复制代码

提示我未安装eslint，按y，回车安装

1. Need to install the following packages:
2.   eslint@8.57.0
3. Ok to proceed? (y) y

复制代码

接下来执行初始化。

1. npx eslint --init

复制代码

接下来会有弹出一些问题，可根据自身项目情况进行回答，期间会询问是否须要安装相应插件，y->回车。

2.配置eslintrc

会在项目根目次下生成.eslintrc.cjs文件，然后对项目进行自己须要的配置

1. module.exports = {
2.     // 使 eslint 支持 node 与 ES6
3.     env: {
4.         browser: true,
5.         es2021: true,
6.         node: true
7.     },
8.     // 引入推荐的语法校验规则
9.     extends: [
10.         'eslint:recommended',
11.         'plugin:vue/vue3-recommended',
12.         'plugin:@typescript-eslint/recommended',
13.         'plugin:prettier/recommended'
14.     ],
15.     overrides: [],
16.     // 这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
17.     // 先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
18.     // 选择使用的解析器
19.     parser: 'vue-eslint-parser',
20.     // 解析器的详细配置
21.     parserOptions: {
22.         // 使用最新版 ES 语法
23.         ecmaVersion: 'latest',
24.         // 使用 ESLint TS 解析器
25.         parser: '@typescript-eslint/parser',
26.         // 使用 ES 模块化规范
27.         sourceType: 'module'
28.     },
29.     // 使用的插件
30.     plugins: ['vue', '@typescript-eslint'],
31.     // 自定义规则
32.     rules: {
33.         '@typescript-eslint/no-unused-vars': 'off',
34.         indent: [
35.             'error',
36.             4,
37.             {
38.                 SwitchCase: 1
39.             }
40.         ],
41.         'vue/multi-word-component-names': [
42.             'error',
43.             {
44.                 ignores: ['index', 'Header'] //需要忽略的组件名
45.             }
46.         ],
47.         '@typescript-eslint/no-var-requires': 'off',
48.         '@typescript-eslint/no-explicit-any': 'off',
49.         semi: 'off',
50.         '@typescript-eslint/no-this-alias': 'off',
51.         'eslintno-debugger': 'off',
52.         'vue/no-unused-vars': 'off',
53.         'vue/no-template-shadow': 'off',
54.         'vue/require-v-for-key': 'off',
55.         'vue/no-textarea-mustache': 'off',
56.         'vue/no-v-html': 'off'
57.     }
58. };

复制代码

3.配置下忽略文件eslintignore

在根目次下创建.eslintignore文件，清除一些文件夹

1. node_modules
2. *.md
3. .vscode
4. .idea
5. dist
6. /public
7. /docs
8. .husky
9. .local
10. /bin
11. Dockerfile
12. .eslintrc.js

复制代码

4.配置package.json

然后配置下package.json中的启动命令，如许便可以执行 pnpm run lint:fix 来进行主动格式化代码。

1.   "scripts": {
2.     "dev": "vite --open",
3.     "test": "echo "Error: no test specified" && exit 1",
4.     "eslint:fix": "eslint --fix"
5.   },

复制代码

2 prettier

 1.安装 prettier 依赖

1. pnpm install -D prettier

复制代码

1. pnpm install -D eslint-config-prettier eslint-plugin-prettier

复制代码

2.创建.prettierrc.js 文件

1. module.exports = {
2.     "singleQuote": true,
3.     "semi": false,
4.     "bracketSpacing": true,
5.     "htmlWhitespaceSensitivity": "ignore",
6.     "endOfLine": "auto",
7.     "trailingComma": "all",
8.     "tabWidth": 2,
9.    
10.     "printWidth": 100,
11.     "useTabs": false,
12.     "bracketSameLine": true,
13.     "arrowParens": "always",
14.     "vueIndentScriptAndStyle": false,
15.     "singleAttributePerLine": false
16.   }

复制代码

3.创建 .prettierignore 文件

1. dist/
2. node_modules/
3. .vscode/
4. .idea/
5. /public/*
6. .local
7. **/*.svg
8. **/*.sh

复制代码

4.配置package.json

1. {
2.   "scripts": {
3.     "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
4.   }
5. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。