我自己的配置
- 下载插件
- ESlint //代码分格检查，
- vetur // 语法高亮，Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件
- Prettier - Code formatter
- ctrl+, 打开设置，搜索setting，点击在setting.json中编辑
- 复制下面{}代码进去，不想要的属性可以自行删除掉或者更改true/false
{
// 是否允许自定义的snippet片段提示
"editor.snippetSuggestions": "top",
"editor.fontSize": 14,
"editor.fontWeight": "400",
"editor.formatOnType": true,
"guides.enabled": false,
"editor.tabSize": 2,
// 配置文件关联，以便启用对应的提示
"files.associations": {
"*.vue": "vue",
"*.wxss": "css"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
// 是否开启eslint检测
"eslint.enable": true,
// 文件保存时是否根据eslint进行格式化
"eslint.autoFixOnSave": true,
// eslint配置文件
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
// eslint能够识别的文件后缀类型
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
// 格式化快捷键（默认）：Shift+Alt+F
// #每次保存的时候将代码按eslint格式进行修复
"prettier.eslintIntegration": true,
"terminal.integrated.rendererType": "dom",
"diffEditor.renderSideBySide": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// #每次保存的时候自动格式化
"editor.formatOnSave": 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.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Solarized Light" // 两个选择器中是否换行
}设置html标签属性样式(style)不换行
把对应的部分替换为下面的配置保存:
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto",
"end_with_newline": false
}
}参考样式
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"editor.defaultFormatter": "vscode.html-language-features",
"editor.formatOnPaste": true,
// 是否允许自定义的snippet片段提示
"editor.snippetSuggestions": "top",
"editor.fontSize": 14,
"editor.fontWeight": "400",
"editor.formatOnType": true,
"guides.enabled": false,
"editor.tabSize": 2,
// 配置文件关联，以便启用对应的提示
"files.associations": {
"*.vue": "vue",
"*.wxss": "css"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
// 是否开启eslint检测
"eslint.enable": true,
// 文件保存时是否根据eslint进行格式化
// "eslint.autoFixOnSave": true,
// eslint配置文件
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
// eslint能够识别的文件后缀类型
// "eslint.validate": [
// "javascript",
// {
// "language": "vue",
// "autoFix": true
// },
// "html",
// "vue"
// ],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
// 格式化快捷键（默认）：Shift+Alt+F
// #每次保存的时候将代码按eslint格式进行修复
"prettier.eslintIntegration": true,
"terminal.integrated.rendererType": "dom",
"diffEditor.renderSideBySide": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #代码结尾的分号
"prettier.semi": true,
// #使用单引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto", //行内样式换行自适应
"end_with_newline": false,
// #vue组件中html代码格式化样式
},
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"workbench.colorTheme": "Solarized Light",
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}, // 两个选择器中是否换行
//自定义某主题的代码颜色
"editor.tokenColorCustomizations": {
"[Solarized Light]": {
//注释，颜色和字体设置
"comments": {
"foreground": "#ff0055" ,
"fontStyle":"bold"
},
//以下为textMateRules(自定义)作用域颜色
//在代码页面用F1搜索developer:inspect editor tokens and scopes
"textMateRules": [
{"scope":"entity.other.attribute-name",//作用域：css类名
"settings": {
"foreground": "#08d2f5",
}
},
{
"scope": "entity.name.tag",//html标签
"settings": {
"foreground": "#b6adad"
}
}
]
}
},
//sass配置
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}],
"liveSassCompile.settings.generateMap": false,
//自动建CSS输出路径
"easysass.targetDir": "~/../css",
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"editor.hover.sticky": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 1
}Hbuider自定义颜色
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
