vue VSCode 开发设置（html自动补全、eslint保
2019-01-30 本文已影响0人
liwuwuzhi
html 标签自动补全
File -> Preference -> Setting ->搜索setting.json -> Edit in settings.json
settings.json
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*.vue":"html"}
编辑后自动保存
方法1：File -> Preference -> Setting ->搜索setting.json -> Edit in settings.json
settings.json
Setting.json
"files.autoSave": "xxx"
方法2：File -> Preference -> 搜索框输入：files.autoSave
之后能看到 files.autoSave 的可选项有
off : 关闭自动保存（默认）
afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；
onFocusChange: 编辑器失去焦点时自动保存；
onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；
ESLint sLint 保存时自动自动格式化
安装 ESLint https://cn.eslint.org/
$ npm install eslint --save-dev
vscode 中安装 ESLint 插件
image.png
然后配置 vscode 的 setting.json
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]
新建.vue文件时自动创建vue模板
File -> Preference -> User Snippers
vue.json文件，然后添加下面模板
{
"Create vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"container\">\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: 'c',",
" data () {",
" return {\n",
" }",
" },",
" props: {},",
" components: {},",
" watch: {},",
" computed: {},",
" methods: {},",
" created () {},",
" mounted () {}",
"}",
"</script>\n",
"<style scoped lang=\"stylus\">\n",
"</style>",
"$2"
],
"description": "Create vue template"
}
}
然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.triggerExpansionOnTab": true
如果你的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
注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。
{
// 換行
"editor.wordWrap": "on",
// 代码缩进修改成2个空格
"editor.tabSize": 2,
// 不檢查縮進，保存后統一按設置項來設置
"editor.detectIndentation": false,
//保存的时候自动格式化
"editor.formatOnSave": true,
// 字體大小
"editor.fontSize": 16,
// 設置行高
"editor.lineHeight": 24,
// 主題
"workbench.colorTheme": "Visual Studio Light",
// 左側工具欄是否可見
"workbench.activityBar.visible": true,
// 控制何时自动保存已更新文件。
// 接受值有: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)。如果设置为 "afterDelay"，可在 "files.autoSaveDelay" 中配置延迟时间。
"files.autoSave": "onWindowChange",
// "files.autoSaveDelay": 3000,
// 让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// 去掉代码结尾的分号
"prettier.semi": true,
// 使用带引号替代双引号
"prettier.singleQuote": true,
// 启用后，按下 TAB 键，将展开 Emmet 缩写。
"emmet.triggerExpansionOnTab": true,
// js設置單引號
"javascript.preferences.quoteStyle": "single",
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 使用eslint 風格使用standard 進行代碼規則限制
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
//自动保存信息
// By default, create file username
"fileheader.Author": "you name",
// By default, update file username.
"fileheader.LastModifiedBy": "you name",
// By default, common template. Do not modify it!!!!!
"fileheader.tpl": "/*\r\n * @Author: {author}\n * @Date: {createTime}\n * @Last Modified by: {lastModifiedBy}\n * @Last Modified time: {updateTime}\n */\n",
// vue组件中html代码格式化样式
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
}
}
或者：
{
"vsicons.projectDetection.autoReload": true,
"git.autofetch": true,
"window.zoomLevel": 0,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"fileheader.Author": "L",
"fileheader.tpl": "/*\r\n * @Author: {author} \r\n * @Date: {createTime} \r\n * @Last Modified by: {lastModifiedBy} \r\n * @Last Modified time: {updateTime} \r\n */\r\n",
"fileheader.LastModifiedBy": "L",
"editor.tabSize": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折行对齐
"wrap_attributes": "force-aligned",
}
},
"prettier.singleQuote": true,
"prettier.semi": false,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"beautify.tabSize": 2,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"[html]": {},
"files.associations": {
"*.html": "html"
},
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}
其中：
- fileheader插件的配置，可以在头部生成信息
"fileheader.Author": "L"
- eslint 格式化js时默认设置是结束语句带分号，引号为双引号，但是我们的规范是不加分号、单引号，所以要手动修改配置
"prettier.singleQuote": true,
"prettier.semi": false,
- vetur 格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折行对齐
"wrap_attributes": "force-aligned",
}
},
//空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
#附
根目录下创建eslint规则文件 .eslintrc.js
（下面browsers 多了s 正确的为browser）
.eslintrc.js
