VSCode推荐使用插件

下载?

仙人指路

来解决终端问题（让终端更好用/更好看）

windows用户自求多福哈，不想使用windows的很大原因就是终端太难用（就算最近出了很多新的）

• iTerm2

  谁用谁知道，被推荐烂了，不多逼逼，iTerm2

• Oh My Zsh

  有了ta，你就可以安装自己想要的终端主题，官网傻瓜教程

  我用的是这款

  

  你可以看到当前node版本和git分支等等。

插件

推荐必装插件

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

  不用解释

• Auto Close Tag

  自动闭合标签，比如你敲下<h1>，就会自动补上</h1>。

• Auto Rename Tag

  自动重命名标签，修改开始标签，结束标签也会自动修改。

• Bracket Pair Colorizer

  彩虹?括号，很好看。

• One Dark Pro

  我最喜欢的一款主题，很好看。

• VSCode Great Icons

  文件图标主题。

然后是一些工具性质的插件（按需）

• Live Server

  可以帮助你启动一个本地服务器，用不了的话安装 Previwe on Web Server也行。右键编辑区即可看到Open With Live Server，也可以弄个自己喜欢的快捷键。

• Markdown Preview Enhanced

  markdown编辑，装就对了。

• GitLens + Git Graph

  GitLens可以让你看到每一行的代码是谁写的，拒绝❌甩锅。Git Graph可以让你看到图形化的git分支情况（点击左下角git Graph）。

  

  

• Code Runner

  可以运行各种代码。装了之后右上角有个运行标志。

  

• Code Spell Checker

  拼写不对的单词，会有波浪线提示。

  

• TODO HighLight

  高亮TODO:和FIXME:，配合注释使用哦～

  

• Highlight Matching Tag

  双击选中某个标签后，匹配所有相同标签，用于查找标签。

  

• carbon-now-sh

  生成好看的代码块图片。Alt+Cmd+A or (Alt+Windows+A on Windows)

  

代码片段插件

• JavaScript (ES6) code snippets
• ES7+ React/Redux/React-Native snippets
• Vetur + Volar

  vue2使用前一个，vue3使用后一个，不用哪个禁用哪个。

• vscode-styled-components
• any-rule

  正则表达式大全，右键编辑区即可。

  

代码校验/格式化

• ESLint + TSLint
• Prettier

  不推荐Beautify（垃圾?️）

项目上常用插件

• Version Lens

  让你看到各个依赖的详细版本。点击右上角的V即可。

  

• element-ui-helper
• Remote – SSH + Remote – SSH: Editing Configuration Files

  部署项目必备。这两个插件可以让你直接在VSCode打开远程服务器（你可以直接复制VSCode里的文件粘贴上去，或者直接在服务器上使用VSCode修改代码，也可以通过VSCode打开终端），什么xshell、xftp、mob、finalshell、windterm、securecrt、tabby、自带终端…都弱爆了，给老子死?

  

  

配置

以下是我的VSCode配置，Command+Shift+P or (Ctrl+Shift+P on Windows)打开setting.json

我这里配置了保存后按照我想要的规则格式化

{
  "files.autoSave": "off", // 自动保存

  "editor.formatOnSave": true, // 保存格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化程序
  "editor.fontSize": 16, // 字号
  "editor.tabSize": 2, // 一个tab强制转换为2个空格
  "editor.fontFamily": "Input Mono, Fira Code, monospace", // 字体
  "editor.smoothScrolling": true, // 滚动时启用动画
  "editor.renderWhitespace": "all", // 空白字符显示方式
  "editor.quickSuggestions": {
    "strings": true // 在键入字符串时启用建议
  },
  "editor.wordWrap": "on", // 在视区宽度处换行

  "explorer.confirmDragAndDrop": true, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认

  "workbench.colorTheme": "One Dark Pro", // 主题
  "workbench.iconTheme": "vscode-great-icons", // 文件主题
  "workbench.tree.indent": 16, // 树缩进

  "terminal.integrated.defaultProfile.windows": "PowerShell", // 默认终端
  "terminal.integrated.defaultProfile.osx": "zsh", // 默认终端
  "terminal.integrated.copyOnSelection": true, // 终端选中复制
  // "terminal.integrated.fontSize": 16, // 终端字号

  "breadcrumbs.enabled": true, // 开启 vscode 文件路径导航

  "security.workspace.trust.untrustedFiles": "prompt", // 不显示信任引入提示

  // prettier 设置
  "prettier.semi": false, // 设置分号
  "prettier.singleQuote": true, // 强制单引号
  "prettier.trailingComma": "none", // 禁止随时添加逗号
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",

  // updated 2022-03-14 00:43
  // https://github.com/antfu/vscode-file-nesting-config
  // 配置文件归类
  "explorer.experimental.fileNesting.enabled": true,
  "explorer.experimental.fileNesting.expand": false,
  "explorer.experimental.fileNesting.patterns": {
    "*.js": "$(capture).js.map, $(capture).min.js, $(capture).d.ts",
    "*.jsx": "$(capture).js",
    "*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts",
    "*.ts": "$(capture).js, $(capture).*.ts",
    "*.tsx": "$(capture).ts",
    "*.vue": "$(capture).*.ts, $(capture).*.js",
    ".env": "*.env, .env.*, env.d.ts",
    ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
    "index.d.ts": "*.d.ts",
    "package.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, api-extractor.json, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, cypress.json, dangerfile*, dprint.json, firebase.json, grunt*, gulp*, jasmine.*, jenkins*, jest.config.*, jsconfig.*, karma*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, renovate*, rollup.config.*, stylelint*, tsconfig.*, tsdoc.*, tslint*, tsup.config.*, turbo*, typedoc*, vercel*, vetur.config.*, vitest.config.*, webpack.config.*, workspace.json, xo.config.*, yarn*",
    "vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .htmlnanorc*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, cssnano.config.*, cypress.json, env.d.ts, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
    "vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .htmlnanorc*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, cssnano.config.*, cypress.json, env.d.ts, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"
  }
}
复制代码

VSCode代码片段

右键左下角设置图标，选择用户代码片段。需要xxx格式的代码片段就新建xxx.json。

这是以.vue文件为例，我想设置以下代码片段：

打开vue.json，打开这里

讲代码片段复制到your snippet里面，tab trigger填入你想要的简写，就生成好了

接下来copy snippet到vue.json

在.vue文件输入vue2即可出现

最后