主题:
1.Snazzy Operator,
2.SynthWave '84
字体:
- JetBrains Mono
其他一些字体:
Operator Mono - 支持连字。
Fira Code - 免费并支持连字。
Dank Mono - 付费并支持连字。
在 VS Code 中,按 Ctrl + P,输入 settings.json 并打开该文件。现在,用我的给定值替换下面的属性值。
{
"workbench.colorTheme": "Snazzy Operator",
"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 22,
"editor.letterSpacing": 0.5,
"editor.fontWeight": "400",
"editor.cursorStyle": "line",
"editor.cursorWidth": 5,
"editor.cursorBlinking": "solid"
}
图标:
1.Material Icon Theme
我使用的扩展:
1.Auto Rename Tag —— 自动重命名配对的 HTML / XML 标签,也可以在 JSX 中使用。
2.Bracket Pair Colorizer 2 —— 此扩展名允许用颜色标识匹配的括号,用户可以定义要匹配的符号,以及要使用的颜色。
3.Color Highlight —— 此扩展程序设置在文档中找到的 css / web 颜色的样式
4.CSS Peek
Peek:内联加载 css 文件并在那里进行快速编辑。(Ctrl + Shift + F12)
Go to:直接跳转到 CSS 文件或在新的编辑器(F12)中打开
Hover:在符号上悬停显示定义(Ctrl + hover)
5.DotENV —— 在 .env 文件中高亮显示键值对。
6.ES7 React/Redux/GraphQL/React-Native snippets —— 该扩展为您提供 ES7 中的 JavaScript 和 React / Redux 片段,以及 VS Code 的 Babel 插件功能。
7.Highlight Matching Tag —— 突出显示匹配的开始或结束标签。
8.Image preview —— 悬停时显示图像预览。
9.Indent Rainbow——此扩展使文本前面的缩进着色,在每个步骤上交替使用四种不同的颜色。
10:REST Client —— REST Client 允许您发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。
11.Settings Sync —— 使用 GitHub Gist 在多台机器上同步设置,代码片段,主题,文件图标,启动,键绑定,工作区和扩展。
12.TODO Highlight —— 在代码中突出显示 TODO,FIXME 和其他注释
13.Version Lens —— 显示 package.json 文件中每个软件包的最新版本
vue相关
1.Vetur —— 语法高亮、智能感知、Emmet等
1.EsLint —— 语法纠错
2.Auto Close Tag —— 自动闭合HTML/XML标签
3.Auto Rename Tag —— 自动完成另一侧标签的同步修改
4.JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
5.Path Intellisense —— 自动路劲补全
6.HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
有用的 VS Code 快捷键
Ctrl + P :转到文件,您可以在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。
Ctrl + ` :在 VS Code 中打开 terminal
Alt + Down:下移一行
Alt + Up:上移一行
Ctrl + D:将选定的字符移动到下一个匹配字符串上
Ctrl + Space:触发建议
Shift + Alt + Down:向下复制行
Shift + Alt + Up:向上复制行
Ctrl + Shift + T:重新打开最新关闭的窗口