I used the vs-code editor when I was working on a project recently, and I also used eslint in the project, but in many cases accidentally writing irregular code will become red, although it does not affect the operation, but I do not allow this for code cleanliness. Where the code exists, for the standardization of the code, eslint format verification is added, and automatic settings that conform to the eslint format are configured.
Install eslint and vetur plugins
Configure the settingjs.json file
Path: File -> Preferences -> Settings -> Find settingjs.json ->. Click Edit to
clear the code, copy the following code:
{
"extensions.ignoreRecommendations": false,
"files.associations": {
"*.vue": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"[scss]": {
},
"git.autofetch": true,
"editor.fontSize": 16, //以像素为单位控制字号
// "editor.fontFamily": "monospace", //控制字体系列
"git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
"explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
"editor.wordWrap": "on", //控制折行方式 off-禁用折行 on-根据视区宽度折行
// "editor.formatOnType": true, //控制编辑器是否应在键入后自动设置行的格式
// "workbench.colorTheme": "Visual Studio Dark", //指定工作台中使用的颜色主题
//打开新页面 welcomePage-打开默认页面 none-不打开
"workbench.startupEditor": "newUntitledFile",
//控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
"git.confirmSync": false,
//保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器
// "gitlens.historyExplorer.enabled": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline" //强制展开多行
// "wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": true,
"wrapAttributes": false,
"sortAttributes": true,
}
},
"beautify.config": {
"brace_style": "collapse,preserve-inline" //解决花括号中换行
},
"vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
"editor.formatOnSave": true,
"vetur.format.options.tabSize": 2,
// "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.minimap.enabled": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
{
"extensions.ignoreRecommendations": false,
"files.associations": {
"*.vue": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"[scss]": {
},
"git.autofetch": true,
"editor.fontSize": 16, //以像素为单位控制字号
// "editor.fontFamily": "monospace", //控制字体系列
"git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
"explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
"editor.wordWrap": "on", //控制折行方式 off-禁用折行 on-根据视区宽度折行
// "editor.formatOnType": true, //控制编辑器是否应在键入后自动设置行的格式
// "workbench.colorTheme": "Visual Studio Dark", //指定工作台中使用的颜色主题
//打开新页面 welcomePage-打开默认页面 none-不打开
"workbench.startupEditor": "newUntitledFile",
//控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
"git.confirmSync": false,
//保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器
// "gitlens.historyExplorer.enabled": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline" //强制展开多行
// "wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": true,
"wrapAttributes": false,
"sortAttributes": true,
}
},
"beautify.config": {
"brace_style": "collapse,preserve-inline" //解决花括号中换行
},
"vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
"editor.formatOnSave": true,
"vetur.format.options.tabSize": 2,
// "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.minimap.enabled": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
Save, close the editor, reopen the project and run the save file to automate your code based on the eslint format! Finally, you can prefer the configuration of settingjs.json according to your personal preference. For example, my configuration is "editor.tabSize": 2, you can change it to 4, which represents a tab distance. Go try