工欲善其事,必先利其器。--《论语·卫灵公》

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……

从看到的第一眼开始就喜欢上了,直接抛弃了原来的sublime、atom。然而和所有的文本编辑器一样,要让它能合乎自己的心意,还是需要添加一些配置。

我们要解决几个问题:

  1. VUE语法高亮
  2. 编码智能感知
  3. 正确识别ES6语法及自动语法修正,自动格式化

第一步,安装ESLint插件来支持实时语法检查

确保你已经在本地环境中安装了eslint,可以在终端程序中执行eslint -v来检查。如果没有安装,可以使用npm install -g eslint进行全局安装。

安装插件: Ctrl/Commond + P 然后输入 ext install ESLint 然后回车点安装即可。

如果在配置和使用上有任何问题,

请仔细查看该插件的帮助说明。好的工具总是有一份非常完善的帮助。

修改ESLint配置(prefereneces->Settings):

HTML:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html"
    ],

    "eslint.options": {
        "plugins": ["html"]
    }

别忘记在项目根目录中添加.eslintrc.json文件开启ESLint检查,可以使用快捷命令Shift+Ctrl/Command+P-->ESLint Create

第二步,使用vetur插件支持VUE的语法高亮,提示,语法检查等等

安装插件:Ctrl/Command + P 然后输入 ext install vetur 然后回车点安装即可。

修改vetur配置(prefereneces->Settings):

Emmet:

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

ESLint:

/*将vue加入ESLint的检查列表*/
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "vue"
]

安装stylus依赖插件:

Ctrl/Command + P 然后输入 ext install stylus 然后回车点安装即可。

第三步,安装Chrome Browser VUE 插件

  • vue-devtools 克隆到本地
  • 运行npm install
  • 运行npm run build
  • 打开Chrome扩展程序管理页
  • 选择开发者模式
  • 点击“加载已解压的扩展程序”按钮,选择shells/chrome目录

使用方法:见官方说明

第四步,除以上插件,还有一些可以提升编写代码效率的插件,不一一讲解了,请根据下面的列表自行安装。

  • Auto Close Tag
  • Auto Rename Tag
  • Git Project Manager
  • gitignore
  • npm (npm support for VS Code)
  • npm IntelliSense
  • Output Colorizer
  • TODO Highlight