VSCode-代码格式化

1、vetur

1. 介绍

VSCode下强大的vue工具，支持vue语法的高亮（完整的支持高亮的语法以下图）、代码片断、emmet（代码速写，VSCode自己自带有tab键对html5的代码进行快速开发，可是须要在settings.json文件中配置）、错误检测、格式化等，具体的使用能够参考官方文档

vetur官方文档

2. 使用

1) emmet在vue中使用的配置

"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
}复制代码

2）错误检测

vetur默认使用eslint-plugin-vue@beta来检测template，若是不想使用linting，能够在settings.json中关闭

修改此值为false便可

3）格式化

vetur推荐使用两个空格来规定editor.tabSize和editor.insertSpace,

对于html、css、less、scss、js格式使用js-beautify来规范，这个不须要再进行安装

js-beautify的github仓库

3. 使用要点

须要在VSCode中安装vetur插件，其余都不须要安装

要点一： 保存文件的时候自动格式化的方法：

settings.json文件中添加：

"editor.formatOnSave": true复制代码

要点二： 保存文件的时候自动格式化的问题的解决：

可是这样格式化有一个问题，就会全部的js语句会自动带上分号和双引号

缘由就是由于vetur默认使用的有不少是prettier插件，以下图

prettier在VSCode中的插件- prettier 安装成功后VSCode默认的格式化就会被prettier代替，默认的快捷键是Ctrl + shift + F 。详细配置查看官方文档（此处仅供学习，咱们的基础配置中暂无需安装）

prettier官方文档

基本prettier配置文档

prettier只关注格式化，它没有检查代码语法的能力，因此常常会遇到搭配各类lint检查的时候出现各类冲突。

下面是解决保存时自动格式化出现添加双引号和分号的方法：

解决方式1:

在settings.json文件中添加：

把

"vetur.format.defaultFormatter.js": "prettier"复制代码

改成 

"vetur.format.defaultFormatter.js": "vscode-typescript"复制代码

这种解决方式就用不了prettier这个插件了

解决方式2：（如今使用这种解决方式）

-- 在settings.json文件中新增

// 去除自动格式化时js加的分号与双引号
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false,
        "singleQuote": true
    }
}复制代码

解决方式3：

VSCode局部安装prettier插件

npm install --save-dev --save-exact prettier复制代码

--或者是全局安装

npm install --global prettier复制代码

若是安装npm包 须要进行如下操做：

--1. 新建.prettierrc.json配置文件在项目根目录下

-- 2 . prettierrc.json文件的配置以下

{
    "singleQuote": true,
    "semi": false
}复制代码

要点三： template内的标签格式化：

vetur默认不会对template内进行格式化，改进方法

在settings.json文件中添加：

// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html"复制代码

要点四： tab的空格数：

默认编辑器的tab空格是4个 改为2个

在settings.json文件中添加：

"editor.tabSize": 2,复制代码

2、其余配置

推荐安装的插件：

1. vscode-icons

是给VSCode下项目的文件加上图标，以区别文件，在settings.json中增长：

// 文件图标主题插件 安装vscode-icons后的配置
"workbench.iconTheme": "vscode-icons",复制代码

以下图所示：

2. vscode-fileheader

是给文件开始添加注释的插件。安装完毕以后在settings.json中添加配置：

"fileheader.Author": "zhangsan",  
"fileheader.LastModifiedBy": "zhangsan",复制代码

F1或者Alt+Cmd+P而后输入fileheader回车便可添加

添加完以下

其余插件推荐 segmentfault.com/a/119000001…

3、完整settings.json配置文档

{   
    // 文件图标主题插件 安装vscode-icons后的配置
    "workbench.iconTheme": "vscode-icons",
    // 安装vscode-fileheader 给文件开头添加多行注释的配置 (F1或Alt+CMD+P后输入fileheader回车便可添加)
    "fileheader.Author": "zhangsan",
    "fileheader.LastModifiedBy": "zhangsan",
    // 工做区主题色，自行安装本身喜欢的
    "workbench.colorTheme": "One Dark Pro",
    // 控制是否在打开文件时，基于文件内容自动检测 `editor.tabSize#` 和 `#editor.insertSpaces`
    "editor.detectIndentation": false,
    // 默认tab2个空格"editor.tabSize": 2,
    // 使用tab键进行HTML5快速开发
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    // 保存时代码自动格式化
    "editor.formatOnSave": true,
    // 去除自动格式化时js加的分号与双引号
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    // 對template代碼格式化
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 在输入时显示含有参数文档和类型信息的小面板。
    "editor.parameterHints.enabled": true,
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 控制是否在键入时自动显示建议。
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
}复制代码