VSCode配置

Posted on | 阅读数
VSCode配置prettier、vetur、快速注释等

VSCode 作为如今最受欢迎的编辑器，为了它的高效性，需要搭配很多插件来使用

配置说明详解

editor是针对 vscode 的风格设置
例如 tabSize：一个 tab 等于 2 个空格，行高为 24px

search.exclude 配置 vscode 中项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大堆无关内容

files.associations 配置文件关联

sync是用于同步 vscode 配置使用，不用每一次换个电脑都要复制一次配置，避免丢失或者改动，保持一致！

vetur和prettier和stylus是用于 Vue 开发时的代码格式化，代码提示.

eslint 是用于代码格式化代码时，选择用自己的格式化规则或者标准规则，prettier规则等

插件安装

Atom One Dark Theme

主题

Chinese (Simplified) Language Pack for Visual Studio Code

适用于 VS Code 的中文（简体）语言包

Prettier - Code formatter

用于 Visual Studio 代码的更漂亮的格式化程序

ESLint

语法规则和代码风格的检查工具

indent-rainbow

凸显缩进，让你的缩进一目了然

Git History

git 提交历史

GitLens

在代码中显示每一行代码的提交历史

Vetur

添加对.vue 后缀文件的快速书写支持。

View In Browser

迅速通过浏览器打开 html 文件

markdownlint

书写 md 文件的预览插件

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件

Path Intellisense

路径识别苦战，比如书写图片路径时。遗憾就是，对 webpack 项目中的路径别名无法扩展

Document This

快速生成注释，注意只对类和函数有效。快捷键 Ctrl+Alt+D

vscode 自定义配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
{
    "workbench.colorTheme": "Atom One Dark",//主题
    "editor.renderIndentGuides": false,
    "search.location": "panel",//搜索模块放到下方菜单
    "eslint.autoFixOnSave": true,//保存代码自动eslint格式化
    "eslint.enable": true,//是否开启eslint
    "editor.formatOnSave": true,//保存自动格式化
    "eslint.validate": [//eslint 校验配置
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "vetur.format.defaultFormatter.html": "prettier",//prettier格式化代码
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "vsicons.dontShowNewVersionMessage": true,
    "editor.fontSize": 16,//文字大小
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.alwaysShowStatus": true,
    "fileheader.customMade":{//自动化注释配置
        "Author": "yuwangi",
        "Date": "Do not edit",
        "LastEditTime": "Do not edit",
        "LastEditors": "Do not edit",
        "FilePath": "Do not edit",
        "Description": ""
      },
    "fileheader.configObj": {
      "specialOptions":{
        "Date": "since",
        "LastEditTime": "lastTime",
        "LastEditors": "LastAuthor",
        "Description": "message"
      }
    }
}