Eslint +Vue配置
1,安装eslint
执行命令npx eslint --init
完成之后会在项目根目录生成.eslint.js
文件
// eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"@vue/prettier",
"plugin:vue/vue3-essential",
"eslint:recommended",
"airbnb-base",
],
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
},
plugins: ["vue", "@typescript-eslint"],
rules: {
quotes: [1, "double"], // 强制使用双引号
semi: 1, // 末尾分号警告
indent: "off", // 关闭eslint缩进警告
"max-len": ["error", { code: 120 }], // 每行最大长度120字符
"no-console": 0, // 关闭console报错
"space-before-function-paren": ["error", "never"], // 禁止函数名前后有空格
"keyword-spacing": ["error", { before: true, after: true }], // 关键字后面是否要空一格
"no-debugger": 2, // 禁止使用debugger
"comma-dangle": "off",
},
globals: {
// 全局变量忽略检测
configUrl: "readonly",
},
};
2, 设置保存时自动修复
此时,执行 eslint index.js --fix
可以修复已存在 的eslint语法错误
但是每次执行这个命令会很麻烦,所以可以通过修改vscode的配置项,保存时就进行修复
需要用到eslint的vscode插件
将以下配置加入settings.json
"editor.formatOnType": true,
"editor.formatOnSave": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
此时 ctrl s 保存代码时就能修复eslint部分错误
3,安装prettier进行代码风格优化
执行npm i prettier -D
命令安装prettier
安装完之后 执行npx prettier --write 对应文件
即可进行代码风格格式化,凌乱的代码会变得工整
创建.prettier.js文件
// .prettier.js
module.exports = {
semi: false,// 格式化不加分号
singleQuote: false, // 格式化以单引号为主
useTabs: false
}
4,保存时自动进行风格优化
需要用到prettier的vscode插件
设置自动保存
将以下配置加入settings.json(同上一步)
//setting.json文件
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
eslint和prettier的默认格式化规则有冲突
执行命令npm i eslint @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D
解决eslint和prettier的冲突问题
5,添加.eslintignore文件忽略校验(可根据需要自行添加)
// .eslintignore
/public
/src/utils
/dist
6,设置缩进以及行尾序列
根目录下新建文件.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = false
trim_trailing_whitespace = false
7,主动修复
按照上述流程设置完成之后,重启一下vscode
ctrl s即可实现代码风格统一 代码基础错误修复
目前只实现了基础的一版,像变量或者方法未使用等错误类型还需手动修复 不过eslint都会进行提示
部分错误可以通过快捷修复的方式进行修复
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjibje
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13