常用插件
-
Auto Close Tag 自动闭合HTML/XML标签
-
Auto Rename Tag HTML标签同步修改
-
HTML CSS Support 智能提示CSS类名以及id
-
HTML Snippets 智能提示HTML标签，以及标签含义
-
open in browser 在浏览器中打开
-
Path Intellisense 自动提示文件路径，支持各种快速引入文件
-
Vetur Vue语法集成插件
-
Prettier - Code formatter 代码格式化工具
-
Live Server 以服务方式运行文件
-
Chinese Language Pack 中文主题
-
JavaScript (ES6) code snippets ES6语法提示
-
jQuery Code Snippets jQuery语法提示
相关配置
以下配置包含eslint进行 .vue .js 文件检测并自行修复 ，需安装 Vetur、Prettier - Code formatter 插件
{
// git程序配置
"git.path": "C:/Program Files/Git/bin/git.exe",
"terminal.integrated.shell.windows": "C:/Program Files/Git/bin/bash.exe",
"open-in-browser.default": "Chrome",
"liveServer.settings.ChromeDebuggingAttachment": false,
// 是否开启
"powermode.enabled": true,
// 是否抖动
"powermode.enableShake": false,
// 粒子
// "powermode.presets": "particles",
// 火焰
"powermode.presets": "flames",
// 炸裂
// "powermode.presets": "exploding-rift",
// 爆炸
// "powermode.presets": "simple-rift",
// 烟花
// "powermode.presets": "fireworks",
// 魔法
// "powermode.presets": "magic",
// 回形针
// "powermode.presets": "clippy",
// 时间间隔的对方的
"powermode.comboTimeout": 0,
// 随字体颜色变化
"powermode.backgroundMode": "mask",
"liveServer.settings.CustomBrowser": "chrome",
// tab 大小为2个空格
"editor.tabSize": 2,
// 编辑器换行
"editor.wordWrap": "off",
// 保存时自动修复格式问题
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾是否使用分号
"prettier.semi": true,
// prettier 设置是否强制使用单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 设置方法名称后存在空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "aligned-multiple"
},
"prettier": {
"singleQuote": true, //是否使用单引号
"semi": true, //是否存在分号
"printWidth": 10,
"wrapAttributes": false,
"sortAttributes": false
}
},
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.fontLigatures": null,
"liveServer.settings.donotShowInfoMsg": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"explorer.confirmDelete": false,
"workbench.colorTheme": "Default Dark+",
"editor.wordWrapColumn": 200,
"files.autoSave": "afterDelay",
"timeline.excludeSources": [],
"editor.accessibilitySupport": "off",
"eslint.runtime": "",
"doxdocgen.generic.customTags": [],
"settingsSync.ignoredSettings": [
]
}
常用代码片段
1.vue代码片段
{ "Print to console": { "prefix": "vue", "body": [ "<template>", "<!-- 根组件 -->", " <div class=\"pageRoot\">\n", " </div>", "</template>\n", "<script>", "export default {", " name: '',", " components: {},", " data () {", " return {\n", " }", " }", "}", "</script>\n", "<style scoped >", "</style>", "$2" ], "description": "Log output to console" } }
