vue IDE VSCode的安装

听别人推荐，所以vue的编辑器使用的是VSCode。

VSCode其github说明为“VS Code is a new type of tool that combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle.”即，VSCode是将代码编辑器的简单性与开发者所需要的核心编辑-构建-调试周期相结合的一种新型工具。

VSCode下载安装如下所述：

• 在VSCode官网点击下载最新版的VSCode。

VSCode官网地址为：https://code.visualstudio.com/。点击windows版本进行下载。如下图所示：

下载好以后如下图所示：

• 双击.exe安装VSCode，一直点击下一步即可。
• 在VSCode中安装eslint插件。

ESLint是一款智能错误检测插件。其官网为“https://eslint.org/”，其说明为“ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.”，即，ESLint起初是由Nicholas C. Zakas创建于2013年6月的一个开源项目。它的目的是为JavaScript提供一个可插拔的应用程序。

安装好以后，打开VSCode界面，点击左侧菜单栏的“扩展”，搜索“eslint”，然后点击安装即可。如下图所示：（我的已经安装好了）

• 在VSCode中安装vetur插件。

Vetur是一款vue文件基本语法高亮的插件。其下载安装方式同ESLint。如下图所示：

• 配置。

点击文件-->首选项-->设置，打开设置界面，在设置界面的右侧添加配置代码：

"files.autoSave": "off",

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue",

{"language": "vue", "autoFix": true}

],

"eslint.options": {

"plugins": ["html"]

},

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

}

如下图所示：

 

如何在VSCode中打开本地项目？

点击文件-->打开文件夹，导入本地项目，即可在VSCode下查看并编辑本地项目了。如下图所示：

 

如何在VSCode中打开多个项目？

点击文件-->将文件夹添加到工作区，即可打开多个项目。如下图所示：

 

VSCode下怎样全局搜索？

点击文件-->首选项-->设置，添加如下配置代码：

"search.exclude": {

"system/": true,

"!/system/**/*.ps*": true

}

如下图所示：