[环境配置]VS Code

tech_tricks
3,906 阅读4分钟

上一篇的环境配置主要介绍了node环境的安装和一些基本npm包的安装和配置，是基础设施。这篇我打算介绍下代码编辑器VS Code的配置和一些常用的插件，是基础工具。不得不说，从 notepad++ 到 sublime text 再到现在的 vs code主+sublime text辅的配合 ，vs code用来前端项目的开发，sublime text用来单文档浏览编辑（因其大文档处理能力确实牛）。如果你还在几款编辑器之间徘徊不定，不妨试试这个搭配。

安装

安装就不多了，直接下载安装包安装就行了。

配置

接下来就说说我目前的简单配置，够用，用着舒服就行。

{
  // Theme
  "workbench.colorTheme": "Dracula",
  "workbench.iconTheme": "material-icon-theme",
  // Typography
  "editor.fontFamily": "'FiraCode Nerd Font'",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.lineHeight": 24,
  "editor.cursorStyle": "underline",
  // Formatter
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  // Git
  "git.autofetch": true
}

主题

个人比较喜欢深色主题，Dracula是我现在使用的

image.png

另一款比较喜欢的深色主题是Gruvbox Material

image.png

浅色主题的话我一般使用VS Code内置的Solarized Light米色主题

image.png

或者Gruvbox Material Light，偶尔缓解一下视觉疲劳

image.png

图标主题

已经习惯了这套 material-icon-theme 扁平化图标

字体

Fira Code字体本身就是一款被多方推荐的字体，等宽，可读性增加，具体可以看下Fira Code | 为写程序而生的字体这篇博文的介绍。而Fira Code Nerd Font则是在此基础上增加的一些字体图标的支持，像我之前在[环境配置]Windows Terminal美化中介绍oh-my-posh主题时，一些特定的主题在shell中是显示图标的，这就需要使用支持字体图标的Nerd Fonts。
在这里下载Fira Code Nerd Font

其它

VS Code原生已经携带简单格式化功能，不安装任何插件其实也是够用的。但是对我来说一些工程化的项目和团队协作中还是会安装格式化插件（比如 Prettier）方便管理和保持一致。而且我习惯在Project/Workspace级别去设置一些插件的配置保持用户级别干净。 还有就是可以自己调整一下行高，光标样式等，怎么舒服怎么来

常用插件

插件不在多，够用就行，下面介绍一下目前我在用也是实用的几款。
Auto Close Tag
自动补全HTML/XML结束标签 AutoCloseTag.gif Auto Rename Tag
同步重命名起始/结束标签 AutoRenameTag.gif Bracket Pair Colorizer 2
增强多层嵌套括号的可读性
Indent-Rainbow
增强缩进对齐的可读性
Before
image.png
After
image.png
Peacock
有时难免需要打开多个VS Code项目，Peacock插件可以通过改变窗体颜色来减少来回切换的成本，通过视觉的差异比较容易区分不同的项目
image.png
Dracula Official
开篇已介绍
Material Icon Theme
开篇已介绍
Live Server
开启一个本地的网站服务器来浏览网页等并提供自动刷新。
Vue VSCode Snippets
Vue 2和Vue 3的代码片段
Vetur
VS Code中对Vue单文件中的语法增强，例如<template></template>模板中的HTML语法高亮，<script></script>中的JavaScript高亮，<style></style>中的CSS样式高亮。
EditorConfig
格式化相关，帮助编辑器定义编码格式，准备放到后面讲vue-cli时一起讲
Prettier
格式化插件，准备放到后面讲vue-cli时一起讲

还有其他各种好用且有意思的插件大家伙可以留言推荐。

常用快捷键

记住一些常用的快捷键对于开发来说确实会效率些，键盘/鼠标之间的切换成本能少则少。
移动行： Alt + up/down
拷贝并复制当前行： Shift + Alt + up/down
换行（插入行）： Ctrl + Enter
删除行： Ctrl + X
单行注释： Ctrl + /
多行注释： Shift + Alt + A
多选： Ctrl + Alt + up/down 或者 Alt + 鼠标左键
选中内容： Shift + left/right
选中当前位置到行尾的内容： Shitf + End
选中当前位置到行首的内容： Shitf + Home
选中当前位置到文尾的内容： Ctrl + Shift + End
选中当前位置到文首的内容： Ctrl + Shift + Home
同时选中所有匹配内容： Ctrl + Shift + L
侧边栏： Ctrl + b
控制台窗口： Ctrl + ~
命令面板： Ctrl + P

总结

本文就VS Code简单的个性化配置进行了一个介绍，更多的个性化大家还是要根据自己需求去摸索一下，最主要还是用着舒服，高效。

avatar
文章
阅读
粉丝