我的VSCode配置和常见插件

发表于 分类于 阅读次数： 本文字数： 945 阅读时长 ≈ 3 分钟

本文介绍了我平时的 VSCode 的配置和设置，以及使用频次较多的插件。

配置文件

基础配置

1
2
3
4
5
6
7
8
9
10
{
  // 保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
    "source.fixAll.eslint": true
  },
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

其他配置

1
2
3
4
5
6
7
//工作区不显示以下文件夹
// "files.exclude": {
// 	"node_modules/": true,
// 	"dist/": true
},
// 显示面包屑
// "breadcrumbs.enabled": true,

Prettier 其他配置

  1. 配置到 setting.json 中
1
2
3
4
5
6
7
8
// prettier 配置
"prettier.trailingComma": "all",
"prettier.enable": true,
"prettier.semi": false, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 2, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
  1. 单独的配置文件 .prettierrc.js
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
module.exports = {
  // 字符串使用单引号
  singleQuote: true,
  // 每行末尾自动添加分号
  semi: false,
  // 行尾逗号,默认none,可选 none|es5|all
  trailingComma: 'all',
  // 使用tab缩进，默认false
  useTabs: false,
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 对象中打印空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'avoid',
  // 换行长度，默认80
  printWidth: 120,
  // jsxBracketSameLine 设置为true时,将多行JSX元素的 > 放在最后一行的末尾，而不是单独放在下一行
  /* 
      <button
         className="prettier-class"
         id="prettier-id"
         onClick={this.handleClick}>
         Click Here
      </button> 
       */
  // 设置为false时
  /*
      <button
          className="prettier-class"
          id="prettier-id"
          onClick={this.handleClick}
      >
          Click Here
      </button>
       */
  jsxBracketSameLine: true,
  endOfLine: 'auto',
}

设置

插件

HTMLCSS

Auto Close Tag （已内置）

标签。

注意：VSCode 不支持在 .vue 文件中原生的自动闭合标签功能。您可以通过安装 Vue Languages Features (Volar) 来启用此功能。

Auto Rename Tag（已内置）

标签。在 settings.json 文件中增加配置：

1
2
// settings.json
"editor.linkedEditing": true

JavaScript

JavaScript (ES6) code snippets

ES6 代码提示。

Vue

Vue - Official

Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 已弃用。改为使用 Vue-Official。

Fast Vue Language Support Extension.

Vue Language Features (Volar)

Vue3 支持。打开自动填充 .value 。搜索 @ext:Vue.volar value 勾选，或者

1
"vue.autoInsert.dotValue": true

重启 VSCode 。

TypeScript Vue Plugin (Volar)

TS 版的 Volar 。

Vue VSCode Snippets

vue 初始模板大全，代码片段。

Vue Peek

快速跳转组件定义和跳转路径。

element

Element UI Snippets

element-ui 提示。

element-plus-vue

vue3 的 element-plus 插件，代码片段、跳转至官方文档、标签悬浮提示、标签属性代码补全。

tailwind

Headwind

格式化 class 类名顺序。

Tailwind CSS IntelliSense

官方代码提示。

UnoCSS

UnoCSS

输入提示, 悬浮显示样式。

Iconify IntelliSense

预览图标。（并不是特地用于 UnoCSS）

Git

Git Graph

图像化查看提交记录。

Git History

查看某一样/某个文件的修改记录，

Gitlens

查看光标所在行的修改人与记录。

代码

Code Runner

运行各种代码。

ESLint

代码质量校验。

Prettier - Code formatter

代码格式化。

辅助类

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

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

Code GPT

内置 GPT 。

Code Spell Checker

英语单词拼接检查。
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Image preview

小图预览图片。

Live Server

自动刷新的本地服务器。

Todo Tree

代码注释里添加 TODO、FIXME、XXX 之一，后跟文本，可以在左侧生成一个 todo-list。

Trailing Spaces（已内置）

将这个配置内容添加到你的 settings.json 文件以启用自动修剪：

1
2
3
{
	"files.trimTrailingWhitespace": true,    
}

有些情况下可能希望关闭这个设置，例如使用 vscode 写 markdown 文档时，因为根据 CommonMark 规范，你必须在行的末尾放置两个或更多空格才能在输出中创建硬行换行。你可以将以下内容添加到你的 settings.json 文件来关闭它：

1
2
3
4
5
{    
	"[markdown]": {    
		"files.trimTrailingWhitespace": false    
	}
}

主题图标

Material Icon Theme

摸鱼

Qwerty Learner

敲单词。