基于Visual Studio Code搭建Vue开发环境

这里安装的是8.11.4版

安装node.js后， npm默认版本为： 6.1.0

安装过程就忽略了.

> npm install -g @vue/cli

创建过程中默认配置（开箱即用）

默认情况下， VS code是使用英文的， 有需要的话， 大家也可自行修改为中文：

将原先的：

修改为：

修改并保存后， 会提示安装语言包， 安装即可：

打开一个.vue的文件时， 会提示推荐安装vetur插件， 当然选择安装了。安装成功后，会提示重启vscode

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript等等

此时打开一个vue文件并编辑， 保存时并不会自动进行格式化， 这里还需要安装一些依赖和一些配置。

> npm install -g eslint

安装好vscode插件后， 执行vscode如下命令：

此时会在终端执行以下命令， 并按提示进行选择：

d:\Project\vue-demo-project>node_modules.bin\eslint.cmd --init ? How would you like to configure ESLint? Answer questions about your style ? Which version of ECMAScript do you use? ES2015 ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? Yes ? Do you use JSX? Yes ? Do you use React? Yes ? What style of indentation do you use? Tabs ? What quotes do you use for strings? Double ? What line endings do you use? Windows ? Do you require semicolons? No ? What format do you want your config file to be in? JSON The config that you've selected requires the following dependencies:

eslint-plugin-react@latest Successfully created .eslintrc.json file in d:\Project\vue-demo-project

d:\Project\vue-demo-project>

完成以上动作后， 会在当前工程目录下生成一个 .eslintrc.json文件

具体配置如下：

查看并检查下eslint server是否启动或报错

若有出错， 一般会给出提示， 按提示处理就好了。

有时会出现报错信息： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)

不同的操作系统下，甚至是不同编辑器，不同工具处理过的文件可能都会导致换行符的改变。 如果实在找不出原因， 或者无法解决， 可以先关闭此项检测。

原因: .eslintrc.js文件中缺少了配置, 如下图所示, 添加右侧红框部分后, 添加依赖eslint-plugin-html后即可.