VsCode 个人配置及插件分享

代码片段

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

{
		"普通for循环": {
			"prefix": "forl", // 触发的关键字
			"body": [
				"for(let ${2:i} = 0, ${3}len = ${1:n}; ${2:i} < ${3}len; ${2:i}++) {",
				"    ${4}",
				"}"
			],
			"description": "普通for循环"
		},
		"map": {
			"prefix": "mapl", // 触发的关键字
			"body": [
				"${1:array}.map(${2:item} => {",
				"    ${3}",
				"})"
			],
			"description": "数组map循环"
		},
		"reduce": {
			"prefix": "reducel", // 触发的关键字
			"body": [
				"${1:array}.reduce((acc, item) => {",
				"    ${2:acc.push(item);}",
				"    return acc;",
				"}, [])"
			],
			"description": "数组reduce循环"
		},
		"filter": {
			"prefix": "filtl", // 触发的关键字
			"body": [
				"${1:array}.filter(item => item);",
			],
			"description": "数组filter循环"
		},
		"console": {
			"prefix": "log", // 触发的关键字
			"body": [
				"console.log(${1});",
			],
			"description": "控制台信息"
		},
		"comment": {
			"prefix": "talk", // 触发的关键字
			"body": [
				"/**",
				" * ${3}",
				" * @param {${1:*}} ${2}",
				" * @returns",
				" * @author kilien",
				" */",
			],
			"description": "注释"
		},
		"vue": {
			"prefix": "vue", // 触发的关键字
			"body": [
					"<template>",
					"  ${2}",
					"</template>",
					"",
					"<script>",
					"export default {",
					"  name:'${1}'",
					"}",
					"</script>",
					"",
					"<style lang=\"scss\" scoped>",
					"",
					"</style>",
			],
			"description": "Vue2 模板"
	},
	"setup": {
		"prefix": "setup", // 触发的关键字
		"body": [
				"<script setup>",
				"  ${2}",
				"</script>",
				"",
				"<template>",
				"  ${1}",
				"</template>",
				"",
				"<style lang=\"scss\" scoped>",
				"",
				"</style>",
		],
		"description": "Vue3 setup script"
	},

	"i18n": {
			"prefix": "i18n", // 触发的关键字
			"body": [
				"import i18n from '@/locales/i18n';",
				"const $t = i18n.global.t;",
			],
			"description": "i18n"
	},
}

setting.json(插件配置)

下载的插件

Prettier - Code formatter
live Server
Volar

  "editor.tabSize": 2,

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

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

插件

基础插件

命令行一键安装

while read -r s; do
  code --install-extension "$s" --force
done <<A
esbenp.prettier-vscode
ms-vscode-remote.remote-ssh
ms-azuretools.vscode-docker
cschleiden.vscode-github-actions
eamodio.gitlens
usernamehw.errorlens
OBKoro1.korofileheader
formulahendry.code-runner
christian-kohler.path-intellisense
wix.vscode-import-cost
wayou.vscode-todo-highlight
emilast.LogFileHighlighter
MS-CEINTL.vscode-language-pack-zh-hans
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

代码格式工具

命令行一键安装

while read -r s; do
  code --install-extension "$s" --force
done <<A
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
2gua.rainbow-brackets
Zignd.html-css-class-completion
ritwickdey.LiveServer
pranaygp.vscode-css-peek
mrmlnc.vscode-scss
stylelint.vscode-stylelint
akamud.vscode-javascript-snippet-pack
xabikos.JavaScriptSnippets
dbaeumer.vscode-eslint
rbbit.typescript-hero
hollowtree.vue-snippets
johnsoncodehk.volar
octref.vetur
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 链接

{
  // 每次保存的时候将代码按格式进行修复
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "html"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  // 同上prettier格式化代码
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "prettier.semi": true, // 语句结尾带分号
  "prettier.singleQuote": true, // 单括号
  "prettier.bracketSpacing": true, // 大括号内空格
  "prettier.printWidth": 100, // 超过最大值换行
  "prettier.proseWrap": "preserve",

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 指定wxml的格式化
  "minapp-vscode.wxmlFormatter": "prettyHtml",
  "minapp-vscode.disableAutoConfig": true,
  "editor.tabSize": 2,
  "workbench.iconTheme": "vscode-icons",
  "git.confirmSync": false,
  "git.autofetch": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "explorer.confirmDragAndDrop": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.editor.splitInGroupLayout": "vertical",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
  "[python]": {
    "editor.formatOnType": true
  }
}

VsCode 个人配置及插件分享

# 代码片段

# setting.json(插件配置)

# 下载的插件

# 插件

# 基础插件

# 翻译插件

# 代码格式工具

代码片段

setting.json(插件配置)

下载的插件

插件

基础插件

翻译插件

代码格式工具