Macbook Pro拥有一块神一样屏幕，不拿来做前端着实浪费，今天开始使用vscode进行前端学习，这里做一些记录，包括一些优质插件和使用技巧。
插件
主题One Dark Pro
-
vscode最漂亮的主题，看代码非常优雅（以上个人观点），在插件仓库安装就会帮你自动换上.
-
如果没换上，使用快捷键 ⌘+K(Windows Ctrl+K) 紧接着 ⌘+T(Windows Ctrl+T) 进入主题的设置，自己手动换上吧。
-
主题颜色预览-vscode themes
文件图标Material Icon Theme
- 使用过两个图标插件，还有一个是
vscode-icons，都可以在插件仓库搜到，个人更加喜欢Material Icon Theme的风格。
字体Fira Code
-
编程的话，肯定推荐用连字字体，最著名的就是
Fira Code了，微软也出了一款Cascadia Code。 -
Fira Code的安装教程&vscode配置教程
当然我相信也有不适应这种字体的，所以这个推荐力度没这么大，默认字体也不错了。
代码格式化Prettier
- 这是一个代码格式化插件，装上之后会代替vscode默认的格式化工具，格式化的快捷键⌥+⇧+F(Windows Shift+Alt+F)。
网页实时调试Live Server
-
Live Server是一个能实时同步前端代码编辑和网页预览的插件，所见即所得。 -
选择HTML文件，右键菜单找到
Open with Live Server就会在浏览器中打开当前HTML网页，一旦代码改变网页也会实时改变。建议配合分屏或者双屏食用。 -
事实上，只有保存了代码才会改变，但是vscode不是实时保存代码的，我们需要改变设置，打开setting，找到
Files: Auto Save，把off改成afterDelay。
远程连接Remote Development
-
如果你拥有一个服务器，那么就需要考虑一下这个插件了。
-
Remote Development由4个插件组成，我们只使用其中的Remote-SSH，关于安装教程，因为太多就开了一篇文章vscode Remote-SSH安装使用教程来讲。
vscode使用技巧
Command Line和Command Palette
-
我们知道一般说的命令行(Command Line, CLI)界面，就是所谓的黑框框，可以运行系统的一系列命令，在一些条件下非常高效。
一般我们使用Terminal来打开。
-
vscode除此之外还有一个命令面板(Command Palette)，这个是对vscode作出一系列命令的工具，包括vscode自带的和插件的命令。
随着使用vscode的频率越来越高，最终大多数人都会爱上这个命令面板。
使用快捷键 ⌘+⇧+P(Windows Ctrl+Shift+P) 可以调出
Command Palette。
打开settings和settings.json
- settings非常重要，很多配置都需要在这里完成。
- 使用
Command Palette来打开，在Command Palette中搜索settings，可以看到两个选项,，分别是Preferences: Open Settings (JSON)和Preferences: Open Settings (UI)，如果你熟悉JSON就选第一个，否则就选第二个。UI只是把settings.json图形化了，其他没有区别。
HTML&CSS生成公式
Emmet被vscode内置了，这个工具对前端开发非常方便，请务必学会，官方的语法表：Emmet Cheat Sheet，分基础，HTML，CSS，XSL三篇，要求大部分都掌握。
编程语言设置
HTML编辑器的设置
{
/*HTML编辑器设置*/
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.tabSize": 2, //一个tab设置成2个空格
"editor.formatOnSave": true //保存的时候格式化
},
"html.format.wrapLineLength": 80, //一行的最大长度
"html.format.indentInnerHtml": true, //format head和body标签
}
- html缩进层数非常多，所以我建议一个tab设置成2个空格，否则一行代码半行都是缩进也太搞笑了。
- 没有使用Prettier，因为我发现还是自带的HTML编辑器的一些规则比较好。
Python工作环境
包括代码提示，代码规范，代码调试，使用Jupyter模式。
