vue3+ts+EsLint+Prettier规范代码的方法实现_vue.js
本文主要介绍在Vue3中使用TypeScript做开发时，如何安装与配置EsLint和Prettier，以提高编码规范。感兴趣的可以了解一下
目录
使用EsLint的使用添加配置文件Prettier的使用使用husky和lint-staged构建代码 增加setting.json配置参考资料
本文主要介绍在Vue3中使用TypeScript做开发时，如何安装与配置EsLint和Prettier，以提高编码规范。
（1）EsLint 提供编码规范；
（2）Prettier 是一个 Opinionated 的代码格式化工具。
使用
EsLint的使用
安装依赖
npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
这四个依赖分别是：
– `eslint`: EsLint的核心代码
– `eslint-plugin-vue`：[为Vue使用Eslint的插件](https://eslint.vuejs.org/)
– `@typescript-eslint/parser`：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
– `@typescript-eslint/eslint-plugin`：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
添加配置文件
npx eslint –init
根目录下增加.eslintrc.js文件。（建议选择js文件，json不可以写注释） 修改配置文件
主要是修改rules中的相关配置，具体可查看官方配置
/*!
* https://eslint.bootcss.com/docs/rules/
* https://eslint.vuejs.org/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: 2020,
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, // 不需要写文件开头的 @prettier
insertPragma: 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\”
]
}
参考资料
Prettier官网
EsLint官网
EsLint Rules
Prettier看这一篇就行了
使用EsLint+Prettier规范TypeScript代码
到此这篇关于vue3+ts+EsLint+Prettier规范代码的方法实现的文章就介绍到这了,更多相关vue3 ts 规范代码内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
