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
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 ）
vscode怎么格式化js中的json数据?
1、vs code安装插件eslint
2、文件 - 首选项 - 设置 - json配置
3、粘贴以下JSON配置，保存
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "aligned-multiple"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"window.zoomLevel": 0,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}}
vscode中vue怎么格式化代码
PS:现在推荐使用vetur插件
win10崩溃，重装win7，结果sublime text插件无法安装，各种心塞，于是决定转战vscode。
与sublime text相比，vscode有不少优点：
中文输入法支持更好。在windows平台下，需要st支持中文输入需要安装各种插件，而且效果也是差强人意。
基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能，st每次都需要自己安装，浪费时间。
但是st插件更丰富，vscode插件相对较少，vue相关插件vscode更是只有一个，而且使用起来有不少问题，并且作者已经很久没有更新了，折腾了一下午，最终可以用来编写vue项目了。
vscode关于vue插件现在只有vscode-vue一个，安装完成代码提示并没有生效，这是因为vue文件的语言模式默认为html，需要在setting.json中设置：
"files.associations": {
"*.vue": "vue"
}
但是此时编写样式emmet插件不能正确识别，所以我后来也放弃了这种方式。
仔细思考，编写vue项目主要需要：
代码补全代码片段
emmet正确生成html标签
emmet正确生成css、scss
代码高亮
其中2、3、4点，在html中都是可以做到的，而vue的代码补全与代码片段只需要自己编写就可以了，于是我将vue文件的语言模式还原为默认的html，在用户代码片段中加入vue文件需要的代码片段（文件-首选项-用户代码片段-html），最终效果还可以。
添加的代码片段（持续更新）：
{
// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"Create vue template": {
"prefix": "vuec",
"body": [
"template",
"/template",
"script",
"export default {",
" name: \"${1:component_name}\",",
" data () {",
" return {",
" };",
" }",
"}",
"/script",
"style lang=\"${2:css}\" scoped",
"/style"
],
"description": "Create vue template"
}
}
