vscode 插件摘抄

一些烂插件千万别安装， 比如  vue-definition  ， 安装后跳转本来能直接到达定义的，结果安装了这个烂东西后还要弹个窗口，本来一个的还非显示两个让你选， 非常垃圾

1  Code Runner

时至今日，Code Runner已经有了超过300万的下载量，代码一键运行，支持超过40种语言。

安装好Code Runner之后，打开你所要运行的文件，有多种方式来快捷地运行你的代码：

• 在编辑区，右键选择 Run Code
• 键盘快捷键 Ctrl+Alt+N
• 快捷键 F1 调出 命令面板, 然后输入 Run Code
• 在左侧的文件管理器，右键选择 Run Code
• 右上角的运行小三角按钮

2   Path Intellisense 是一个 Visual Studio Code 插件，可自动补全文件名。它对于在 React 中导入组件非常有用，因为你不必手动输入要查找的文件的路径。     

路径智能感知

3  vscode-fake------生成各种假数据类型。（姓名，电话）

you can generate:

• address
• commerce
• company
• database
• date
• finance
• hacker
• image
• internet
• lorem
• name
• phone
• random
• system

Installation

Type cmd+shift+p to launch command palette and choose Extensions: Install Extension. Search faker and install.

4 Vue 2 Snippets------vue2的语法高亮，语法提示。

代码提示提示类

HTML Snippets

完整的HTML代码提示，包括HTML5

HTML CSS Support

在 html 标签上写class 智能提示css样式

jQuery Code Snippets

jQuery代码提示
超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

 

13. Indent-Rainbow

Indent-Rainbow 会给缩进添加一种颜色,让你更加直观的看到代码层次。

15. Color Picker

Color Picker 是一个 VSCode 扩展，它为咱们提供了一个图形用户界面，用来选择和生成颜色代码，如 CSS 颜色符号。

18. Todo Tree

Todo Tree 将帮助咱们找到在整个应用程序代码中创建的所有待办事项。它将把它们放到一个单独的树中，

安装后左侧面板下面会出现一颗🌲

还可以在面板的左侧同时查看它们

24. Guides
比 VS Code自带的更好的参考线，可自定义

11、CSScomb
2019/5/23 更新

看名字应该可以联想到它的功能了吧？没错，正如其名，一把梳理 CSS 属性顺序的 “梳子”。CSS 属性书写顺序非常重要，一个合格的前端er 一定会有他遵循的 CSS 书写顺序规则。至于 CSS 属性书写顺序，这里我推荐腾讯 AollyTeam 团队的规范：http://alloyteam.github.io/CodeGuide/#css-declaration-order

下面简单说下这个插件怎么用。按照插件的文档说明：
————————————————

在项目的根目录下创建一个名为：.csscomb.json / csscomb.json / .csscomb.js / csscomb.js 的文件，然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig 字段

至于添加的配置项，CSScomb 提供了示例配置文件：https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json

其中的 sort-order 就是 CSS 属性书写顺序，可以按照自己遵循的规范设置，所以我直接替换成了腾讯的。

这个配置文件里面各个字段的作用可以戳这里查看：https://github.com/csscomb/csscomb.js/blob/master/doc/options.md

放一个效果图：

下面的 content 属性放在第一个是我的个人习惯，其他的顺序都和 AollyTeam 的规范保持一致。
———————————————— 

3、CodeIf

CodeIf 是一个用来给变量命名的网站，你只要输入你想起的中文名，它就会给你提供很多建议的命名：

可能很多人知道有 CodeIf 这么个网站，其实 VS Code 上有插件哦，是不是很神奇 : )

14、Turbo Console Log
快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。

简直好用到犯规！

简单说下这个插件要用到的快捷键:

先选中变量，之后ctrl + alt + l ，使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log 

17、Regex Previewer

实时预览正则表达式的效果。

10、CSS Peek

定位 CSS 类名。

按住 ctrl  或 command键后点击

21、vscode-json

处理 JSON 文件，用法看图：

26、:emojisense:

快速挑选 Markdown 中的 Emoji。

代码翻译
插件名：翻译(英汉词典)

英语不是很好的童鞋，在写代码的时候经常会使用“某道翻译”，但是其实对于代码来说，很多时候我们会用驼峰、小驼峰、下划线等等写法来写变量名、属性名、类名和方法名的。这种写法想使用“某道翻译”在编辑器中悬浮翻译就是不可能了。

找了很久我为大家找到一个非常好用的一个插件可以解决这个问题！

本地77万词条英汉词典，不依赖任何在线翻译API，无查询次数限制。可翻译驼峰和下划线命名，及对整个文件中的标识符批量翻译。

 

选中的词，自动在状态栏中显示选中词的释义，支持驼峰和下划线命名查询

插件名：Browser Preview

VSCode的浏览器预览插件让我们能够在编辑器中打开一个可以真正的浏览器预览。浏览器预览是由Chrome Headless提供的，它的工作原理是在一个新进程中启动一个Headless Chrome实例。提供了一种安全的方法在VSCode中呈现web内容，并支持一些有趣的特性，如编辑器内调试等! 再也不用在浏览器和编辑器中来回切换而觉得麻烦了！

 

实时预览

插件名：Live Server

如果我们是在做一个静态页排版，这个插件可以提供给我们一个本地实时预览服务器，预览会在谷歌浏览器打开。相对于上面讲到的插件来说，这个比较轻量级。

------------------------------------------

1. Project Snippets (代码片段)
project snippets，这是我最喜欢的一个工具，它来自于 VSCode 中内置的原始用户代码片段。
该特性允许你创建自己的代码段，以便在整个项目中重用。

但是“重用”它们到底意味着什么？

如果咱们经常要重复写下面这样的样板文件：

实际上，咱们可以直接将上面的代码放到的用户代码片段中，因此不必写出(或复制和粘贴)整个代码片段，只需键入一个自定义前缀来生成配置的代码片段即可。

打开 VsCode，然后选择 文件 >首选项 > 用户代码片段，则可以选择通过单击 '新建全局代码片段文件'来创建新的全局代码片段。

例如，要为 TypeScript React 项目创建自己的代码片段文件，可以单击新建全局代码片段文件，输入 入typescriptreact.json。它将引导咱们访问一个新创建的.json文件，可以使用该文件来构建使用TypeScript 的 React 应用程序。

例如，要从上面的代码示例创建一个用户片段，可以这样做:

有了它，咱们可以创建一个以.tsx结尾的新TypeScript文件，在新创建的文件输入rsr，然后按回车或 tab 键 Vscode 就会帮咱们生成代码片段内容。

全局用户代码片段的问题是，它将贯穿咱们所有项目(在某些情况下，这对于一般的代码片段来说是非常强大的)。

一些项目将以不同的方式配置，当需要区分特定的用例时，用于配置代码片段的全局文件就成了一个问题。

例如，当每个项目的项目结构不同时

这对于具有特定file/folder结构的项目可能就足够了，但是如果咱们正在处理另一个项目，其中Link 组件具有类似components/Link的路径，该怎么办？

请注意这三个border tests是如何将它们的值用单引号括起来的:border: '1px solid red'。

这在 JS 中是完全有效的，但是如果使用 styled-components作为项目的样式解决方案呢?该语法不再适用于该工作区，因为 styled components使用普通的CSS语法

这就是 project snippets 的亮点所在。

Project snippets使咱们可以声明项目/工作区级别的代码段，让当前项目代码段不会与其它项目冲突也不会污染其他项 

编辑器命令「Command Palette」

在搜索加上>前缀就可以调用命令了。编辑器的命令可以做很多，可以快速搜索快捷键，还可以执行插件的一些命令，非常实用哦！

Mac: Command + P

Linux/Windows：Ctrl + P

合并行「Join Line」
Mac：Control + J

Linux/Windows：使用上面说到的快捷键打开快捷键查询列表，搜索"合并行"（editor.action.joinLines），鼠标放在合并行的快捷键上，然后点击编辑图标，这里可以设置一个你喜欢的快捷键。

 

代码折叠「Code Folding」
在开发项目中，很多时候前端的代码在单个文件下都会越写越多，当我们想专注看一部分或者寻找某段代码时就颇有困难了​。一般这个时候我们都会把一些不重要的代码段折叠起来。但是手动用鼠标一个一个点击效率是很低的。代码折叠快捷键在这种情况就非常实用了。

折叠代码快捷键
Mac: Command + Option + [

Windows/linux: Ctrl + Shift + [

展开代码快捷键
Mac: Command + Option + ] 

跳转到特定行数「Navigate to a Specific Line」

在排查错误的时候经常会用到的一个快捷键，我们需要找到当前文件下特定行的代码。

Mac: Command + G

Windows/Linux: Ctrl + G

文件中跳转特定符号「Go to Symbol in File」
这里我讲解一下符号指的是什么，它就是在代码中的方法、类或者是属性。

所以在一个比较大的代码文件中，这个快捷键会非常实用。能让我们快速找到想要编辑的方法、属性或者类！

Mac: Command + Shift + O

Windows/Linux: Ctrl + Shift + O

 

项目中跳转特定符号 「Go to Symbol in Workspace」
这个快捷键与文件中跳转的雷同，唯一区别就是这个可以搜索出整个项目中的方法、类和属性，并且快速跳转到这些符号的位置。

Mac: Command + T

Windows/Linux: Ctrl + T

 

删除整个单词

alt + del 

Command + Delete

删除一行「Deleting a Line」

用于快速删除一整行的代码。

Mac: Command + X

Windows/Linux: Ctrl + X

按单词选择「Select by words」
为了在编程中脱离使用鼠标，我们经常需要选中一行代码中的几个单词，这个快捷键可以让我们快速做到这样的操作。

Mac: Command + Shift + ← / →

Windows/Linux: Ctrl + Shift + ← / →