初识VSCode

Posted 2021-03-25 pipiyan

1.安装

  Visual Studio Code（VScode ）官网　：https://code.visualstudio.com/

　Visual Studio Code（VScode ）github地址 ：https://github.com/Microsoft/vscode

 

2.主题插件

推荐

• One Dark Pro
• Atom One Dark Theme
• Eva Theme
• Material Palenight Theme

更多Visual Studio Code 主题插件请参考VS Code Downloads

安装流程：

1. 点击扩展商店搜索你要找的插件名称如Atom One Dark Theme，点击安装；

 

2. 将当前使用的主题插件切换成你想要的

在命令面板输入color theme，点击想要的主题完成切换

 

3. VS Code精选插件

 

VS Code所有的插件都可以在VS Code Downloads插件库中找到，如下图：

 

Auto Close Tag

Auto Close Tag：匹配标签，关闭对应的标签。对于html/XML很实用。

Auto Rename Tag

Auto Rename Tag：改变标签的时候同时改动开闭合标签；对于HTML/XML很实用。

HTML CSS Support

HTML CSS Support : 这个也是HTML必备插件之一。

CSS Peek

CSS Peek ： html和css中关联css的跳转

Code Runner

Code Runner : 代码编译运行看结果，支持众多语言

Git History

Git History : 查看git分支提交日志的插件

Git History Diff

Git History Diff : 寻找每一个git分支上面提交过的节点，并可以对比差异性。

Path Autocomplete

Path Autocomplete : 路径智能补全插件。

Path Intellisense

Path Intellisense ： 路径智能提示插件。

beautify

beautify ：良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用；但是react工程的jsx文件用beautify插件格式化会乱掉，建议不要用

Prettier - Code formatter

Prettier - Code formatter ： 代码格式化插件，主要针对工程中的javascript / TypeScript / CSS

Prettier Now

Prettier Now ： 支持语言比较全面的代码格式化插件，主要是支持jsx /tsx ，还有sass / less等(问的react工程基本上就是用这2个Prettier插件格式化代码)

Terminal

Terminal ： vs code 内置的命令行插件，也比较实用。

Bookmarks

Bookmarks ： 这个插件支持在文件特定的行做标记，更好的提高开发效率。

Bracket Pair Colorizer

Bracket Pair Colorizer ：很多括号的情况下，这个插件可以做一个颜色的区分，代码一目了然。

Chinese (Simplified) Language Pack for Visual Studio Code

Chinese (Simplified) Language Pack for Visual Studio Code ： 适用于 VS Code 的中文（简体）语言包。

filesize

filesize ： 编辑器底部显示当前文件的大小。

Markdown Preview Enhanced

Markdown Preview Enhanced ： 本地Markdown文档预览插件。

vscode-icons

vscode-icons ： 一套vs code的图标插件。

npm

npm ： 不多说npm。

open-in-browser

open-in-browser ： 一键在浏览器中打开

Live Server

Live Server ：一键开启本地服务。

Local History

Local History ：个人感觉很有用 本地代码的一个保存日志，在没有git,svn，或者很长时间没有提交过代码的情况下，感觉挺实用，再也不怕代码回滚。

 

GitLens — Git supercharged

GitLens — Git supercharged ： GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解

 

4. 快捷键

 

打开命令面板    cmd + shift + p / F1 

打开设置页面    cmd + , 

删除一行        cmd + E

(自定义) 添加书签        cmd + option + k 

代码格式化      control + opiton + B