vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）

File ->Preference ->Setting ->搜索setting.json ->Edit in settings.json

settings.json

方法1：File ->Preference ->Setting ->搜索setting.json ->Edit in settings.json

settings.json

Setting.json

方法2：File ->Preference ->搜索框输入：files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存（默认）

afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；

onFocusChange: 编辑器失去焦点时自动保存；

onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；

安装 ESLint https://cn.eslint.org/

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File ->Preference ->User Snippers

vue.json文件，然后添加下面模板

然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置

如果你的Setting.json文件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier ：规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。

或者：

其中：

4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号

根目录下创建eslint规则文件 .eslintrc.js

（下面browsers 多了s 正确的为 browser ）

一、在线安装首先，打开NotePad文本编辑器然后点击菜单栏上的“插件（P）”选项，在d出来的下拉框中选择“PluginManager”-->“ShowPluginManager”，如下图所示。进入到“PluginManager”窗口，选择“Available”选项卡，在里面找到“Tidy2”选项，选中对应的单选框，然后点击“Install”按钮等待下载Tidy2文件，等到进度条刷新完后，即安装完成。然后重启电脑，插件就可以生效了。二、手动安装在线安装有时会出现安装失败的情况，如果遇到这种情况最好就手动安装。首先我们下载好Tidy2的动态链接库Tidy2.dll，下载后如下图所示（文件可从网盘中下载）。将下载的Tidy2.dll文件放在Notepad++安装目录下的plugins文件夹下（我这里的路径是D:\Notepad++\plugins，一般的默认安装目录是C:\ProgramFiles\Notepad++\plugins）将文件放到Plugins文件夹下后，重启Notepad++软件，再次点击菜单栏上的“插件（P）”，在下拉框中便可以看到“Tidy2”选项三、测试我们打开一个格式散乱的HTML文档，如下图所示，然后我们点击“插件（P）”-->“Tidy2”-->“Tidy（config1-3）”。可以看到散乱的HTML文件已经被格式化了，如下图所示，但貌似多出了一行没什么影响，当然你不喜欢可以删掉它。

1、先打开Brackets编辑器，左边是目录，右边是代码区。

打开一个HTML文件，右上角有个闪电样子的图标就是实时预览功能，需要电脑中安装Chrome浏览器

2、其他的编辑器比如sublime之所以强大是因为有很多插件的支持，可以打造最适合自己的编辑器，那Brackets的插件：

点击文件--扩展管理器

可以看到里面有很多插件

3、而格式化代码是比较常用的功能，先模糊搜索一下里面有没有，输入format关键字搜索，看见的第一个插件Beautify，听起来挺不错，再看下介绍：Format JavaScript, HTML, and CSS files，正是我们需要的，快点安装

4、安装完成先别着急关掉扩展管理器，点击Beautify的更多信息，进入它在github的主页，往下看可以看到这样一行字：

Format HTML, CSS, and JavaScript files by Edit >Beautify menu or Cmd-Alt-L(Mac) / Ctrl-Alt-L(Win) key.

也就是说从Edit-Beautify可以找到它，而且快捷键是Ctrl+Alt+L

5、因为是ubuntu系统，Ctrl+Alt+L默认是锁屏的快捷键，跟它有冲突，所以按下后直接就锁屏了，再看一下编辑中的选项，发现不但有个Beautify还有个Beautify On Save,也即保存后就自动格式化，把它勾上，最后把写好的代码故意打乱，自己试试看

---