安装插件
方法① 点击编辑器左侧边栏的扩展
方法② 使用快键键:Ctrl + Shift + X
方法③ Ctrl + P 之后输入 ext install [插件名]
搜索或选择插件安装
Chinese (Simplified) Language Pack for Visual Studio Code:适用于 VS Code 的中文(简体)语言包
vetur :代码提示,高亮
"emmet.syntaxProfiles":{
"vue-html":"html",
"vue":"html"
}
Bracket Pair Colorizer :给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
open in browser:在编辑器中打开浏览器
Debugger for Chrome :映射vscode上的断点到chrome上,方便调试
HTML Snippets :智能提示HTML标签,以及标签含义
HTML Boilerplate:html代码片段
Beautify :格式化代码
HTML CSS Support :智能提示CSS类名以及id
Path Intellisense :文件路径自动提示
Auto Rename Tag :自动完成同一标签的另一侧标签的同步修改
Auto Close Tag :自动闭合HTML/XML标签
File Peek :路径跳转
Vue 2 Snippets :自动补全vue代码
使用:
import :import ... from ...
data :data() { return {} }
template :<template></template>
script :<script></script>
VueSet :Vue.set( target, key, value )
ESLint : 代码错误检查
ESLint不是安装后就可以用的,还需要一些环境和配置。
首先,需要全局的ESLint,可以使用cnpm install -g eslint来安装。
其次,vue文件是类HTML的文件,为了支持对vue文件的ESLint,需要eslint-plugin-html这个插件。可以使用npm install -g eslint-plugin-html来安装。
接着, 还需要在vscode中配置下ESLint:"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true // HTML自动修复,
},
{
"language": "vue",
"autoFix": true // vue 自动修复
}
],
"eslint.autoFixOnSave": true // 文件保存时自动修复
打开插件配置
快速整理代码格式
ctrl + A :选中所有
Ctrl + [ 和 Ctrl + ] 实现文本的向左移动或者向右移动;
ctrl + D : 选择相同代码段
点击右键(格式化代码) 或者 Shift+Alt + F