VS Code插件以及相关配置

1、Auto Close Tag

新增标签时，自动闭合标签。

{
	// 是否自动插入闭合标签，默认为true
    "auto-close-tag.enableAutoCloseTag": true,
   	// 是否给自动闭合标签，添加“/”，比如<br>会变成<br/>，默认值为true
   	"auto-close-tag.enableAutoCloseSelfClosingTag": true,
   	// 是否在自动闭合标签的正斜杠前插入空格（默认为false）
   	"auto-close-tag.insertSpaceBeforeSelfClosingTag": false,
   	// 哪些语言或者脚本可以使用此插件，默认["*"]，此处通配符表示所有语言或脚本
   	"auto-close-tag.activationOnLanguage": [
        "xml",
        "php",
        "blade",
        "ejs",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "vue",
        "liquid",
        "erb",
        "lang-cfml",
        "cfml",
        "HTML (Eex)"
    ],
    // 哪些语言不能使用此插件
    "auto-close-tag.disableOnLanguage": [
        "php",
        "python"
    ],
    // 禁用哪些标签不能使用此插件
    "auto-close-tag.excludedTags": [
        "area",
        "base",
        "br",
        "col",
        "command",
        "embed",
        "hr",
        "img",
        "input",
        "keygen",
        "link",
        "meta",
        "param",
        "source",
        "track",
        "wbr"
    ],
    // 是否同时启用Visual Studio和升华文本模式。（默认值为false）
    "auto-close-tag.fullMode": false
}

2、Auto Rename Tag

修改自闭和标签时，开始标签和结束标签同时变更（自闭和标签和自定义标签会存在一些问题，请谨慎使用）。

{
	// 哪些语言或者脚本支持自动重命名标签。默认值["*"]，此处通配符表示所有语言或脚本
  	"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}

3、Color Highlight

在编辑器中颜色高亮显示，比如：#fff，#ffffff，white，rgb(255,255,255)等等。

4、VS Color Picker

颜色选择器。

5、vscode-icons

多种VS Code文件夹和文件图标。

6、Live Server

为静态和动态页面启动具有实时重新加载功能的本地开发服务器，类似于webpack中的热重载功能。

7、koroFileHeader

用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

8、file-size

一个简单的扩展名。在状态栏中显示当前文本文件大小。保存文件或更改活动选项卡时，状态将更新。

9、HTML Snippets

用于快捷生成HTML标签。

10、JS-CSS-HTML Formatter

用于格式化html、css、js、json文件内容。

11、Beautify

用于格式化html、css、js、json、less/sass文件内容。

12、Vetur

几乎是vue2.x的定制插件，相关API提示和自动生成，甚至，可以配置自己的vue模板。比如：

{
	// Place your snippets for vue 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, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"    <section class=\"\"></section>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"    name: '',",
			"    components: {},",
			"    props: {},",
			"    data() {",
			"        return {};",
			"    },",
			"    computed: {},",
			"    watch: {},",
			"    created() {",
			"        this.createdInitEvent();",
			"    },",
			"    mounted() {",
			"        this.mountedInitEvent();",
			"    },",
			"    destroyed() {},",
			"    methods: {",
			"        createdInitEvent() {},",
			"        mountedInitEvent() {}",
			"    }",
			"};",
			"</script>",
			"",
			"<style lang=\"less\" scoped></style>",
			""
		],
		"description": "Vue 标准模板"
	}
}

13、ESLint

代码格式校验，是的同一工作环境下的代码风格保持一致。

最后，附上我的VS Code的配置文件settings.json。

/**
 * windows' VS Code Setting
 */
{
    "workbench.startupEditor": "newUntitledFile",
    "git.ignoreLegacyWarning": true,
    "editor.insertSpaces": true,
    // 文件末尾添加空白行
    "files.insertFinalNewline": true,
    // 方法名与方法体有空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": true, // 不加分号
            "singleQuote": true, // 用单引号
            "trailingComma": "none" // 禁止尾随逗号
        }
    },
    "vetur.format.options.tabSize": 4,
    "vetur.validation.template": false,
    "terminal.integrated.shell.windows": "D:/Softwares/Git/bin/bash.exe",
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "fileheader.configObj": {
        "createFileTime": false,
        "language": {
            "languagetest": {
                "head": "/$$",
                "middle": " $ @",
                "end": " $/"
            }
        },
        "autoAdd": false,
        "autoAddLine": 80,
        "autoAlready": false
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 16,
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
}

14、project-tree

此插件会自动生成当前根目录文件夹的文件目录树，并且会以README.md文件的形式存在（如果之前有此文件，则会在后面追加目录树，如果无，则会生成此文件），具体操作方法为：

• 安装project-tree
• 按Ctrl+Shift+P组合键，搜索Project Tree，并点击此选项即可

15、tree-generator

此插件可以生成项目内某一个目录的目录树插件，具体操作方法为：鼠标右键点击某一个文件夹，在弹出的右键菜单中选择生成目录树，然后将生成在粘贴板中的目录树结构复制在想要保存的文件中即可。