VsCode 个人配置及插件分享

代码片段#

个人简写输出对应代码片段

1
{
2
    "普通for循环": {
3
      "prefix": "forl", // 触发的关键字
4
      "body": [
5
        "for(let ${2:i} = 0, ${3}len = ${1:n}; ${2:i} < ${3}len; ${2:i}++) {",
6
        "    ${4}",
7
        "}"
8
      ],
9
      "description": "普通for循环"
10
    },
11
    "map": {
12
      "prefix": "mapl", // 触发的关键字
13
      "body": [
14
        "${1:array}.map(${2:item} => {",
15
        "    ${3}",
16
        "})"
17
      ],
18
      "description": "数组map循环"
19
    },
20
    "reduce": {
21
      "prefix": "reducel", // 触发的关键字
22
      "body": [
23
        "${1:array}.reduce((acc, item) => {",
24
        "    ${2:acc.push(item);}",
25
        "    return acc;",
26
        "}, [])"
27
      ],
28
      "description": "数组reduce循环"
29
    },
30
    "filter": {
31
      "prefix": "filtl", // 触发的关键字
32
      "body": [
33
        "${1:array}.filter(item => item);",
34
      ],
35
      "description": "数组filter循环"
36
    },
37
    "console": {
38
      "prefix": "log", // 触发的关键字
39
      "body": [
40
        "console.log(${1});",
41
      ],
42
      "description": "控制台信息"
43
    },
44
    "comment": {
45
      "prefix": "talk", // 触发的关键字
46
      "body": [
47
        "/**",
48
        " * ${3}",
49
        " * @param {${1:*}} ${2}",
50
        " * @returns",
51
        " * @author kilien",
52
        " */",
53
      ],
54
      "description": "注释"
55
    },
56
    "vue": {
57
      "prefix": "vue", // 触发的关键字
58
      "body": [
59
          "<template>",
60
          "  ${2}",
61
          "</template>",
62
          "",
63
          "<script>",
64
          "export default {",
65
          "  name:'${1}'",
66
          "}",
67
          "</script>",
68
          "",
69
          "<style lang=\"scss\" scoped>",
70
          "",
71
          "</style>",
72
      ],
73
      "description": "Vue2 模板"
74
  },
75
  "setup": {
76
    "prefix": "setup", // 触发的关键字
77
    "body": [
78
        "<script setup>",
79
        "  ${2}",
80
        "</script>",
81
        "",
82
        "<template>",
83
        "  ${1}",
84
        "</template>",
85
        "",
86
        "<style lang=\"scss\" scoped>",
87
        "",
88
        "</style>",
89
    ],
90
    "description": "Vue3 setup script"
91
  },
92

93
  "i18n": {
94
      "prefix": "i18n", // 触发的关键字
95
      "body": [
96
        "import i18n from '@/locales/i18n';",
97
        "const $t = i18n.global.t;",
98
      ],
99
      "description": "i18n"
100
  },
101
}

setting.json(插件配置)#

下载的插件#

Prettier - Code formatter
live Server
Volar

1
  "editor.tabSize": 2,
2

3
// 代码的格式化使用工具
4
  "prettier.semi": true, // 语句结尾带分号
5
  "prettier.singleQuote": true, // 单括号
6
  "prettier.bracketSpacing": true, // 大括号内空格
7
  "prettier.printWidth": 100, // 超过最大值换行
8
  "prettier.proseWrap": "preserve",
9

10
  "[vue]": {
11
    "editor.defaultFormatter": "esbenp.prettier-vscode"
12
  },
13
  "[javascript]": {
14
    "editor.defaultFormatter": "esbenp.prettier-vscode"
15
  },
16
  "[html]": {
17
    "editor.defaultFormatter": "esbenp.prettier-vscode"
18
  },
19
  "[css]": {
20
    "editor.defaultFormatter": "esbenp.prettier-vscode"
21
  },
22
  "[scss]": {
23
    "editor.defaultFormatter": "esbenp.prettier-vscode"
24
  },
25
  "[less]": {
26
    "editor.defaultFormatter": "esbenp.prettier-vscode"
27
  },
28
  "[jsonc]": {
29
    "editor.defaultFormatter": "esbenp.prettier-vscode"
30
  }

插件#

基础插件#

命令行一键安装

1
while read -r s; do
2
  code --install-extension "$s" --force
3
done <<A
4
esbenp.prettier-vscode
5
ms-vscode-remote.remote-ssh
6
ms-azuretools.vscode-docker
7
cschleiden.vscode-github-actions
8
eamodio.gitlens
9
usernamehw.errorlens
10
OBKoro1.korofileheader
11
formulahendry.code-runner
12
christian-kohler.path-intellisense
13
wix.vscode-import-cost
14
wayou.vscode-todo-highlight
15
emilast.LogFileHighlighter
16
MS-CEINTL.vscode-language-pack-zh-hans
17
A

Prettier - Code formatter

格式化插件

ID: esbenp.prettier-vscode

说明: Code formatter using prettier

版本: 9.8.0

发布者: Prettier

VS Marketplace 链接

Remote - SSH

vscode ssh远程服务器

ID: ms-vscode-remote.remote-ssh

说明: Open any folder on a remote machine using SSH and take advantage of VS Code’s full feature set.

版本: 0.84.0

发布者: Microsoft

VS Marketplace 链接

Docker

vscode 访问docker容器

ID: ms-azuretools.vscode-docker

说明: Makes it easy to create, manage, and debug containerized applications.

版本: 1.22.1

发布者: Microsoft

VS Marketplace 链接

Github Actions(黑色图标)

可视化启动 Github Action，设置环境变量

ID: cschleiden.vscode-github-actions

说明: GitHub Actions workflows and runs for github.com hosted repositories in VS Code

版本: 0.24.2

发布者: Christopher Schleiden

VS Marketplace 链接

GitLens — Git supercharged

代码行中查看 git 提交历史

ID: eamodio.gitlens

说明: Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more

版本: 12.2.2

发布者: GitKraken

VS Marketplace 链接

Error Lens

错误信息代码行显示

ID: usernamehw.errorlens

说明: Improve highlighting of errors, warnings and other language diagnostics.

版本: 3.6.0

发布者: Alexander

VS Marketplace 链接

koroFileHeader

快捷键自动生成函数注释 | 文件注释

ID: OBKoro1.korofileheader

说明: 用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

版本: 4.9.1

发布者: OBKoro1

VS Marketplace 链接

TODO Highlight

TODO 等注释高亮

ID: wayou.vscode-todo-highlight

说明: highlight TODOs, FIXMEs, and any keywords, annotations… 版本: 1.0.5

发布者: Wayou Liu

VS Marketplace 链接

Code Runner

vscode 代码一键运行

ID: formulahendry.code-runner

说明: Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,

版本: 0.11.8

发布者: Jun Han

VS Marketplace 链接

Path Intellisense

智能路径提示

ID: christian-kohler.path-intellisense

说明: Visual Studio Code plugin that autocompletes filenames 版本: 2.8.1

发布者: Christian Kohler

VS Marketplace 链接

Import Cost

计算JavaScript引入依赖包大小

ID: christian-kohler.path-intellisense

说明: Visual Studio Code plugin that autocompletes filenames 版本: 2.8.1

发布者: Christian Kohler

VS Marketplace 链接

Log File Highlighter

log文件高亮显示

ID: emilast.LogFileHighlighter

说明: Adds color highlighting to log files to make it easier to follow the flow of log events and identify problems. 版本: 2.16.0

发布者: Emil Åström

VS Marketplace 链接

翻译插件#

Chinese 中文汉化vscode

代码格式工具#

命令行一键安装

1
while read -r s; do
2
  code --install-extension "$s" --force
3
done <<A
4
formulahendry.auto-close-tag
5
formulahendry.auto-rename-tag
6
2gua.rainbow-brackets
7
Zignd.html-css-class-completion
8
ritwickdey.LiveServer
9
pranaygp.vscode-css-peek
10
mrmlnc.vscode-scss
11
stylelint.vscode-stylelint
12
akamud.vscode-javascript-snippet-pack
13
xabikos.JavaScriptSnippets
14
dbaeumer.vscode-eslint
15
rbbit.typescript-hero
16
hollowtree.vue-snippets
17
johnsoncodehk.volar
18
octref.vetur
19
A

Auto Close Tag

自动合并html标签块

ID: formulahendry.auto-close-tag

说明: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

版本: 0.5.14

发布者: Jun Han

VS Marketplace 链接

Auto Rename Tag

标签对同步修改

ID: formulahendry.auto-rename-tag

说明: Auto rename paired HTML/XML tag

版本: 0.1.10

发布者: Jun Han

VS Marketplace 链接

Rainbow Brackets

括号对高亮区分

ID: 2gua.rainbow-brackets

说明: A rainbow brackets extension for VS Code.

版本: 0.0.6

发布者: 2gua

VS Marketplace 链接:

IntelliSense for CSS class names in HTML

根据在工作区中找到的定义或通过link元素引用的外部文件为 HTML 属性提供 CSS 类名称补全

ID: Zignd.html-css-class-completion

说明: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

版本: 1.20.0

发布者: Zignd

VS Marketplace 链接:

Live Server

搭建本地服务器，运行html

ID: ritwickdey.LiveServer

说明: Launch a development local Server with live reload feature for static & dynamic pages

版本: 5.7.9

发布者: Ritwick Dey

VS Marketplace 链接:

CSS Peek

根据上下文快速寻找匹配的class的css

ID: pranaygp.vscode-css-peek

说明: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

版本: 4.2.0

发布者: Pranay Prakash

VS Marketplace 链接:

SCSS IntelliSense

scss的智能提示

ID: mrmlnc.vscode-scss

说明: Advanced autocompletion and refactoring support for SCSS 版本: 0.10.0

发布者: mrmlnc

VS Marketplace 链接:

Stylelint

配合 stylelint 对于样式代码进行规范

ID: stylelint.vscode-stylelint

说明: Official Stylelint extension for Visual Studio Code

版本: 1.2.3

发布者: Stylelint

VS Marketplace 链接:

JavaScript (ES6) code snippets

提供常见的 JavaScript 代码片段

ID: xabikos.JavaScriptSnippets

说明: Code snippets for JavaScript in ES6 syntax

版本: 1.8.0

发布者: charalampos karypidis

VS Marketplace 链接:

ESLint

配合 eslint 对于JavaScript代码进行规范

ID: dbaeumer.vscode-eslint

说明: Integrates ESLint JavaScript into VS Code.

版本: 2.2.6

发布者: Microsoft

VS Marketplace 链接:

TypeScript Hero

智能排序组织 ts的相关导入性文件

ID: rbbit.typescript-hero

说明: Additional toolings for typescript

版本: 3.0.0

发布者: Christoph Bühler

VS Marketplace 链接:

Vue 3

Volar

针对 Vue3 的官方插件，编写vue3代码必备

ID: Vue.volar

说明: Language support for Vue 3

版本: 0.40.13

发布者: Vue

VS Marketplace 链接

Vue 2.x

Vetur

针对 Vue2.x 的官方插件

ID: octref.vetur

说明: Vue tooling for VS Code

版本: 0.36.0

发布者: Pine Wu

VS Marketplace 链接

Vue 3 Snippets

提供Vue3 和 Vue2.x 的常见的代码片段

ID: hollowtree.vue-snippets

说明: A Vue.js 3 And Vue.js 2 Code Snippets Extension

版本: 1.0.4

发布者: hollowtree

VS Marketplace 链接

1
{
2
  // 每次保存的时候将代码按格式进行修复
3
  "editor.formatOnSave": false,
4
  "editor.codeActionsOnSave": {
5
    "source.fixAll": true
6
  },
7
  "emmet.triggerExpansionOnTab": true,
8
  "emmet.includeLanguages": {
9
    "vue-html": "html",
10
    "vue": "html",
11
    "javascript": "html"
12
  },
13
  "emmet.syntaxProfiles": {
14
    "vue-html": "html",
15
    "vue": "html"
16
  },
17
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
18
  // 同上prettier格式化代码
19
  "prettier.trailingComma": "none",
20
  "prettier.arrowParens": "avoid",
21
  "files.associations": {
22
    "*.cjson": "jsonc",
23
    "*.wxss": "css",
24
    "*.wxs": "javascript"
25
  },
26
  "prettier.semi": true, // 语句结尾带分号
27
  "prettier.singleQuote": true, // 单括号
28
  "prettier.bracketSpacing": true, // 大括号内空格
29
  "prettier.printWidth": 100, // 超过最大值换行
30
  "prettier.proseWrap": "preserve",
31

32
  "[vue]": {
33
    "editor.defaultFormatter": "esbenp.prettier-vscode"
34
  },
35
  "[javascript]": {
36
    "editor.defaultFormatter": "esbenp.prettier-vscode"
37
  },
38
  "[html]": {
39
    "editor.defaultFormatter": "esbenp.prettier-vscode"
40
  },
41
  "[css]": {
42
    "editor.defaultFormatter": "esbenp.prettier-vscode"
43
  },
44
  "[scss]": {
45
    "editor.defaultFormatter": "esbenp.prettier-vscode"
46
  },
47
  "[less]": {
48
    "editor.defaultFormatter": "esbenp.prettier-vscode"
49
  },
50
  "[jsonc]": {
51
    "editor.defaultFormatter": "esbenp.prettier-vscode"
52
  },
53
  // 指定wxml的格式化
54
  "minapp-vscode.wxmlFormatter": "prettyHtml",
55
  "minapp-vscode.disableAutoConfig": true,
56
  "editor.tabSize": 2,
57
  "workbench.iconTheme": "vscode-icons",
58
  "git.confirmSync": false,
59
  "git.autofetch": true,
60
  "liveServer.settings.donotShowInfoMsg": true,
61
  "bracket-pair-colorizer-2.depreciation-notice": false,
62
  "explorer.confirmDragAndDrop": false,
63
  "[json]": {
64
    "editor.defaultFormatter": "esbenp.prettier-vscode"
65
  },
66
  "workbench.editor.splitInGroupLayout": "vertical",
67
  "[typescript]": {
68
    "editor.defaultFormatter": "esbenp.prettier-vscode"
69
  },
70
  "terminal.integrated.defaultProfile.windows": "PowerShell",
71
  "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
72
  "[python]": {
73
    "editor.formatOnType": true
74
  }
75
}