目录
参考资料
使用
EsLint的使用
安装依赖
添加配置文件
Prettier的使用
安装依赖
添加配置文件
将Prettier添加到EsLint中
使用husky和lint-staged构建代码
安装依赖
修改package.json
增加setting.json配置
本文主要介绍在Vue3中使用TypeScript做开发时，如何安装与配置EsLint和Prettier，以提高编码规范。
（1）EsLint 提供编码规范；
（2）Prettier 是一个 Opinionated 的代码格式化工具。
参考资料
Prettier官网EsLint官网EsLint RulesPrettier看这一篇就行了使用EsLint+Prettier规范TypeScript代码使用
EsLint的使用
安装依赖
npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
这四个依赖分别是：
- `eslint`: EsLint的核心代码- `eslint-plugin-vue`：[为Vue使用Eslint的插件](/)- `@typescript-eslint/parser`：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码- `@typescript-eslint/eslint-plugin`：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
添加配置文件
npx eslint --init
根目录下增加.eslintrc.js文件。（建议选择js文件，json不可以写注释）修改配置文件
主要是修改rules中的相关配置，具体可查看官方配置
/*!* /docs/rules/* /rules/** - 0: off* - 1: warn* - 2: error*/module.exports = {root: true,env: {browser: true,node: true,es6: true},parser: 'vue-eslint-parser',parserOptions: {parser: '@typescript-eslint/parser',ecmaVersion: ,sourceType: 'module',jsxPragma: 'React',ecmaFeatures: {jsx: true}},globals: {AMap: false,AMapUI: false},extends: ['plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended','prettier','plugin:prettier/recommended'],rules: {'@typescript-eslint/ban-ts-ignore': 'off','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-var-requires': 'off','@typescript-eslint/no-empty-function': 'off','vue/custom-event-name-casing': 'off','no-use-before-define': 'off','@typescript-eslint/no-use-before-define': 'off','@typescript-eslint/ban-ts-comment': 'off','@typescript-eslint/ban-types': 'off','@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/explicit-module-boundary-types': 'off','@typescript-eslint/no-unused-vars': ['error',{argsIgnorePattern: '^_',varsIgnorePattern: '^_'}],'no-unused-vars': ['error',{argsIgnorePattern: '^_',varsIgnorePattern: '^_'}],'space-before-function-paren': 'off','vue/name-property-casing': ['error', 'PascalCase'], // vue/component-definition-name-casing 对组件定义名称强制使用特定的大小'vue/attributes-order': 'off','vue/one-component-per-file': 'off','vue/html-closing-bracket-newline': 'off','vue/max-attributes-per-line': 'off','vue/multiline-html-element-content-newline': 'off','vue/singleline-html-element-content-newline': 'off','vue/attribute-hyphenation': 'off','vue/require-default-prop': 'off','vue/script-setup-uses-vars': 'off','vue/html-self-closing': ['error',{html: {void: 'always',normal: 'never',component: 'always'},svg: 'always',math: 'always'}]}}
Prettier的使用
安装依赖
npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier
这三个依赖分别是：
- `prettier`：prettier插件的核心代码- `eslint-config-prettier`：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效- `eslint-plugin-prettier`：将prettier作为ESLint规范来使用
添加配置文件
在项目的根目录下创建`.prettierrc.js`文件，并添加如下配置
module.exports = {printWidth: 120, // 换行字符串阈值tabWidth: 2, // 设置工具每一个水平缩进的空格数useTabs: false,semi: false, // 句末是否加分号vueIndentScriptAndStyle: true,singleQuote: true, // 用单引号trailingComma: 'none', // 最后一个对象元素加逗号bracketSpacing: true, // 对象，数组加空格jsxBracketSameLine: true, // jsx > 是否另起一行arrowParens: 'always', // (x) => {} 是否要有小括号requirePragma: false, // 不需要写文件开头的 @prettierinsertPragma: false // 不需要自动在文件开头插入 @prettier}
将Prettier添加到EsLint中
修改`.eslintrc.js`文件，在extends中增加
'prettier','plugin:prettier/recommended'
其中：
- `prettier/@typescript-eslint`：使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范- `plugin:prettier/recommended`：使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出
使用husky和lint-staged构建代码
安装依赖
npm i --save-dev husky lint-staged
修改package.json
添加以下代码
"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src*/**/*.ts": ["prettier --config .prettierrc.js --write","eslint","git add"],"src*/**/*.json": ["prettier --config .prettierrc.js --write","eslint","git add"]}
这样，在执行git commit时，EsLint会检查提交的代码。
增加setting.json配置
在.vscode文件夹中增加`setting.json`配置文件，用于自动保存时，自动修复及检验代码。
{"typescript.tsdk": "./node_modules/typescript/lib","typescript.enablePromptUseWorkspaceTsdk": true,"volar.tsPlugin": true,"volar.tsPluginStatus": false,//===========================================//============= Editor ======================//==========================================="explorer.openEditors.visible": 0,"editor.tabSize": 2,"editor.defaultFormatter": "esbenp.prettier-vscode","diffEditor.ignoreTrimWhitespace": false,//===========================================//============= Other =======================//==========================================="breadcrumbs.enabled": true,"open-in-browser.default": "chrome",//===========================================//============= files =======================//==========================================="files.eol": "\n","search.exclude": {"**/node_modules": true,"**/*.log": true,"**/*.log*": true,"**/bower_components": true,"**/dist": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"out": true,"dist": true,"node_modules": true,"CHANGELOG.md": true,"examples": true,"res": true,"screenshots": true,"yarn-error.log": true,"**/.yarn": true},"files.exclude": {"**/.cache": true,"**/.editorconfig": true,"**/.eslintcache": true,"**/bower_components": true,"**/.idea": true,"**/tmp": true,"**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true},"files.watcherExclude": {"**/.git/objects/**": true,"**/.git/subtree-cache/**": true,"**/.vscode/**": true,"**/node_modules/**": true,"**/tmp/**": true,"**/bower_components/**": true,"**/dist/**": true,"**/yarn.lock": true},"stylelint.enable": true,"stylelint.packageManager": "yarn","liveServer.settings.donotShowInfoMsg": true,"telemetry.enableCrashReporter": false,"workbench.settings.enableNaturalLanguageSearch": false,"path-intellisense.mappings": {"/@/": "${workspaceRoot}/src"},"prettier.requireConfig": true,"typescript.updateImportsOnFileMove.enabled": "always","workbench.sideBar.location": "left","[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"[vue]": {"editor.codeActionsOnSave": {"source.fixAll.eslint": false}},"cSpell.words": ["vben","windi","browserslist","tailwindcss","esnext","antv","tinymce","qrcode","sider","pinia","sider","nprogress"]}
