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 ）

1.插件:HTML Snippets,点击安装

2.使用快捷键ctrl+shift+p搜索settings.json文件，添加以下内容

3.使用

输入！按回车，会自动生成HTML基础结构

settings.json 提示“无法在只读编辑器中修改”

打开设置，搜索要修改的字段，可以直接修改

具体 *** 作：

使用eclipse自带的插件，无需另外安装插件，具体步骤如下

1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist

修改Auto Activation triggers for java的值为：zjava 点击apply按钮

2.继续打开JavaScript→Editor→Content Assist

修改Auto Activation triggers for javaScript的值为：zjs 点击apply按钮

3.继续打开web→html Files→Editor→Content Assist

修改Prompt when these characters are inserted:的值为：zhtml 点击apply按钮

4.打开File→Export→Genral→Preferences→导出一文件到任意位置，然后用记事本打开此文件 ，Ctrl+F查找 zjava 然后将其值改为 .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW

再查找 zjs 然后将其值改为 .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW

再查找 zhtml 然后将其值改为 <=.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW

保存文件。

5.打开eclipse→File→Import→Genral→Preferences，导入刚刚编辑的文件后，所有设置完毕。

---