​vscode保存代码，自动按照eslint规范格式化代码设置

vscode保存代码，自动按照eslint规范格式化代码设置

编辑器代码风格一致，是前端代码规范的一部分。我们现在前端绝大部分都在使用eslint，或者将要把代码改为eslint，那么此时我们怎么方便使用这个规范呢，下面我来介绍一下使用vscode+eslint 自动保存，自动格式化的一种方式！

首先需要装一些vscode插件

eslint、Vetur、Prettier，具体的插件说明可参考作者之前的一篇文章。

vscode插件安装

安装完成后需要配置一下eslint，打开eslint的配置文件（左下角有个设置,点开搜索settings.json)

打开settings.jons，贴上如下配置，注意自己原有的vscode主题和字体等不要替换掉

{
"workbench.colorTheme": "One Monokai",
"editor.fontSize": 14,
"eslint.enable": true, //是否开启vscode的eslint
"eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
"editor.formatOnSave": true, // #每次保存的时候自动格式化
"eslint.options": { //指定vscode的eslint所处理的文件的后缀
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"eslint.validate": [ //确定校验准则
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"files.autoSave": "off",
"files.associations": {
"*.wpy": "vue",
"*.wxml": "wxml",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.html": "html"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
//  #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
//  #去掉代码结尾的分号
"prettier.semi": false,
//  #使用单引号替代双引号
"prettier.singleQuote": true,
//  #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
//一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
//  #去掉代码结尾的分号
"semi": false,
//  #使用单引号替代双引号
"singleQuote": true
}
},
// 插件KoroFileHeader
// 文件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)
"fileheader.customMade": {
"Descripttion": "",
//"version": "",
"Author": "voanit",
"Date": "Do not edit",
"LastEditors": "voanit",
"LastEditTime": "Do not Edit"
},
//函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
"fileheader.cursorMode": {
"name": "",
// "test": "test font",
// "msg": "",
"param": "",
"return": ""
},
//安装live Server插件
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.NoBrowser": true,
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.host": "127.0.0.1",
"liveServer.settings.port": 5000, //设置本地服务的端口号
"liveServer.settings.root": "/dist"
}

接下来就可以愉快的使用自动保存eslint格式了。

结尾彩蛋

欢迎关注前端之阶公众号，获取更多前端知识，加入前端大群，与知名互联网大佬做朋友，开启共同学习新篇章！

• 点赞
• 收藏
• 分享
• 文章举报