使用VSCode高效开发Vue项目
主题
安装主题三选一：SynthWave '84
avatar
其他使用过的：One Dark Pro
avatar
Snazzy Operator
avatar
扩展插件
图标插件安装
正在使用：Material Icon Theme
avatar
Vue的语法高亮和提示插件
// 安装 Vetur
**<mark style="box-sizing: border-box;">Vetur</mark>**
自动重命名配对的 HTML / XML 标签，默认对所有语言激活，可再setting.json中配置
// 安装 Auto Rename Tag
<mark style="box-sizing: border-box;">**Auto Rename Tag**</mark>
"auto-rename-tag.activationOnLanguage": ["html", "xml", "javascript"]
HTML中的标签自动闭合
// 安装 Auto Close Tag
**<mark style="box-sizing: border-box;">Auto Close Tag</mark>**
允许用颜色标识匹配的括号
// 安装 Auto Close Tag
<mark style="box-sizing: border-box;">**Bracket Pair Colorizer 2**</mark>
在文档中显示csss的颜色
// 安装 Color Highlight
**<mark style="box-sizing: border-box;">Color Highlight</mark>**
Peek：内联加载 css 文件并在那里进行快速编辑。（Ctrl + Shift + F12）
Go to：直接跳转到 CSS 文件或在新的编辑器（F12）中打开
Hover：在符号上悬停显示定义（Ctrl + hover）
// 安装 CSS Peek
**<mark style="box-sizing: border-box;">CSS Peek</mark>**
代码格式化规范ESLint
// 安装 ESLint
**<mark style="box-sizing: border-box;">ESLint</mark>**
// vue使用eslint
"editor.formatOnSave": false,
// 自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 配置 ESLint 检查的文件类型
"eslint.validate": [
"javascript",
"vue",
"html"
]
在文档中预览图片
// 安装 Image preview
**<mark style="box-sizing: border-box;">Image preview</mark>**
高亮匹配的标签
// 安装 Highlight Matching Tag
**<mark style="box-sizing: border-box;">Highlight Matching Tag</mark>**
git工具
// 安装 GitLens — Git supercharged
**<mark style="box-sizing: border-box;">GitLens — Git supercharged</mark>**
在代码中突出显示 TODO，FIXME 和注释
// 安装 TODO Highlight
**<mark style="box-sizing: border-box;">TODO Highlight</mark>**
彩蛋
个人喜欢花里胡哨-安装敲代码特效 powermode 插件
附录
进入setting.json
复制下面代码，关闭后重启vscode 就ok了
{
//编辑器字体大小
"editor.fontSize": 20,
// ctrl+滑轮改变大小
"editor.mouseWheelZoom": true,
// 改变终端
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
// 终端字体
"terminal.integrated.fontSize": 18,
// vue使用eslint
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
// vue使用eslint
"editor.formatOnSave": true,
// 自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 配置 ESLint 检查的文件类型
"eslint.validate": ["javascript", "vue", "html"],
//终端字体
"terminal.integrated.fontFamily": "Consolas",
//行内样式
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.minimap.enabled": true,
"window.zoomLevel": 0,
"git.autofetch": true,
//new
// #让函数(名)和后面的括号之间加个空格
"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代码格式化样式
}
},
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"],
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 1.5px",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
},
"right": {
"custom": {
"borderWidth": "0 1.5px 0 0",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
}
}
},
"workbench.iconTheme": "material-icon-theme",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"update.mode": "none",
"diffEditor.ignoreTrimWhitespace": false,
// "workbench.colorTheme": "Snazzy Operator", // 默认皮肤
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
//设置签代码皮肤样式
"powermode.enabled": true, //是否启用
"powermode.presets": "flames", //exploding-rift 爆炸 flames 火焰
"powermode.enableShake": false //是否抖动
}
