目录Vue配置eslint保存自动格式化插件实现按照 ESLint 规则自动格式化1. 需求插件2. 修改默认格式化插件3. 「Ctrl + S」保存时按照 ESLint 规则自动格
vue项目中有保存自动格式化,还是很舒服的,满足了大多数强迫症
1,用户设置和工作区设置
2,如何找到配置文件
3,setting.JSON
4,需要安装的插件
5,设置默认格式化程序
在VSCode中,两个层级的设置分别为:
如何找到配置文件位置
setting.json配置
最重要的代码,就下面的,其他的都可以根据自己实际开发去设置
// #每次保存的时候自动格式化
"editor.fORMatOnSave": true,
"editor.formatOnType": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
"eslint.format.enable": true,
这个是我百度贴了一些上去
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
"editor.formatOnType": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
"eslint.format.enable": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptReact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 格式化stylus, 需安装Manta's Stylus SupreMacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"editor.fontSize": 18,
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"bracketPairColorizer.depreciation-notice": false // 两个选择器中是否换行
}
需要安装的vscode插件
选择自动格式化程序
停留在页面,然后右键—选择使用xxx格式化文档,然后出现下方图片
这样,就能实现保存代码的时候自动格式化啦
2.1 找到任意代码文件 右键点击代码区域 选择「使用…格式化文档」
2.2 选择「配置默认格式化程序」
2.3 选择「Prettier ESLint」
到此,已经可以实现「Alt + Shift + F」进行自动格式化啦!
3.1 找到菜单栏的文件 -> 首选项 -> 设置
3.2 点击用户区的设置 JSON 图标 打开 JSON 文件
注意: 工作区和用户区的区别
用户区:应用于当前操作系统用户,只要是在当前电脑上开发,任意项目都会生效该配置(慎重修改)
工作区:只应用于当前项目,如果更换项目配置会失效
3.3 将以下配置粘贴进设置 JSON 文件中
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
3.4 粘贴后如下图
到此为止,即可实现保存自动格式化 。
注意: 如果格式化并未按照 ESLint 规则进行,需要将其他所有格式化插件卸载!例如:Beautify、xxxFormatxxx
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue项目配置eslint保存自动格式化问题
本文链接: https://www.lsjlt.com/news/167416.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0