VSCode使用指南

一、.vscode目录

1 .vscode目录是做什么的

存放工作区的项目配置和工具相关文件

2 setting.json

该文件用来设置项目用到的设置（工作区设置），该文件的设置会覆盖掉vscode编辑器的全局配置

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "scss", "vue"]
}

3 extensions.json

该文件用来设置项目用到的插件推荐列表

先定义一个extensions.json文件

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar"
  ]
}

然后到【插件】侧边栏，按下图点击，就会出现上述文件推荐的插件了，然后选择安装即可！

在这里插入图片描述

二、setting.json文件

除了.vscode/目录下存在setting.json文件外，还有另外两个setting.json文件。分别如下：

Default Settings（JSON），默认
User Settings（JSON），用户。设置面板中的（用户）设置就对应这个文件，所有的修改都在该文件中生效
Workspace Settings（JSON），工作区

分别代表了不同的影响范围。优先级关系：工作区 > 用户设置 > 默认设置，当有相同项时，前者覆盖后者

三、.editconfig文件

帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式，统一编码风格的配置文件

更多内容：EditorConfig入门 - timegogo

四、格式化

1. 保存时自动格式化

在settings.json（工作区的或用户的皆可）中添加

1
2
3

{
  "editor.formatOnSave": true,
}

通过设置保存时自动格式化之后，搭配上 Prettier 插件或者VSCode默认的语言功能，就能够实现保存时自动根据对应的规则进行代码格式的修复。但是 ESLint/StyleLint 的规则无法在保存时自动进行修复！

2. 各种Lintter的保存时自动修复

要让各种Lintter在保存时能够自动进行修复，需要在settings.json中找到editor.codeActionsOnSave这个配置项进行配置

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  }
}

3. 不同类型文件使用不同规则

默认格式化程序，可以选择VSCode自带的语言功能，或者如Prettier这样的格式化工具

首先是格式化工具的配置，这个可以编辑器，【右键】-【使用…格式化文档】-【配置默认格式化程序】进行设置

设置后同样会保存在settings.json文件中。

对于各种Lintter工具，则需要到各自的配置文件中进行配置，例如：

{
  "overrides": [
        {
            "files": [
                "**/*.vue"
            ],
            "customSyntax": "postcss-html"
        },
        {
            "files": [
                "**/*.less"
            ],
            "customSyntax": "postcss-less"
        }
    ],
}