插件

back

最新爆款插件tabnine，代码自动补全功能，强大得紧

基础：使用起来更方便

back

  • 1、SettingSync
  • 2、Trailing Spaces 高亮多余空格（节约资源，从我做起）
  • 3、guides
    显示代码对齐辅助线，很好用
  • 4、Comment Translate
    注释翻译（终于不怕看老外写注释了！功能可不仅仅是注释翻译😯）
  • 5、Bracket Pair Colorizer
    彩色括号配对（可别再说括号太多，找不了谁和谁匹配了）
  • Rainbow Brackets
    为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。
  • 6、Visual Studio IntelliCode
    代码自动补齐和提示,可以记录你的代码习惯
  • 7、JavaScript (ES6) code snippets
    ES6代码片段，提供import提示，自动完成
  • Chinese (Simplified) Language Pack for Visual Studio Code
    一个中文语言包
  • beautify
    描述：可以美化高亮 javascript, JSON, CSS, Sass, and HTML 在 Visual Studio Code里.
  • CodeSpellChecker
  • vscode-icons
    没话vscode中文件图标
  • Syntax Highlighter
    加强语法高亮，用过才知道！
  • TabNine
    基于深度学习训练模型打造的智能提示，很实用，准确率挺高
  • RegExp Preview and Editor
    正则可视化解析匹配过程
  • any-rule
    快速查看且引用常用的正则,很实用
  • Markdown Preview Enhanced
    使用Markdon语法编写文件（让你感觉记笔记不在无聊）
  • ProjectManager
  • Indent-Rainbow
    用四种不同颜色交替着色文本前面的缩进
  • koroFileHeader
    自动在文件顶部添加作者信息（不打上点自己的logo，感觉代码都不是亲生的）
  • LeetCode
    闲暇之余，刷刷算法题，也不失为一种乐趣
  • Polacode
    代码截取（再也不怕截出马赛克画质的代码了）
  • Todo Tree
    快速查看含有TODO标记的文件（今天你完成了你目标了嘛）
  • Quokka
    Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
  • SVG Viewer
  • Change Case
    而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
  • local history
    ( vscode拥有本地恢复的某一时刻能力)
  • vscode-elm-jump
    代码跳转定义，按ctrl

前端

back

Name Description
DebuggerforChrome DebuggerforChrome
AtuoRenameTag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改
Auto Close Tag 自动闭合html元素（写出元素的开始端后，闭合端自动生成）
Dependency Analytics 分析项目中npm模块依赖，给出了很直观的数据反馈（包是否有安全问题等）
Xml Complete XML智能补全,遵循类似协议的也可以
Umi Pro 提供 umi js 框架的智能提示，包括补全，跳转，引用查看
React Hooks Snippets React 内置 Hooks 几个 snippet
perfect-css-modules css module 的体验加成，悬浮提示，智能提示，引用跳转
CSS Navigation 获取CSS的定义(跳转或者悬浮），支持 HTML/JSX/TSX ,及类名这些的智能提示，非常棒
CSS Peek 描述：扩展了HTML和ejs代码编辑
HTML CSS Support 智能提示CSS类名以及id
VSCode React Refactor 可以很方便对React组件代码进行重构
fabulous 可视化编辑 css, scss, js, jsx ,tsx 文件的样式，很方便！
Angular Inject Service 服务注入智能提示补全
Vue VSCode Snippets  
VueHelper  
Vue CSS Peek  
Browser Preview 真正强大的网页预览(走内置非外部浏览器),支持断点调试
Copilot for VS Code 非常直观的展示梳理状态容器数据树，前端小伙伴必装
ReactION 实时预览react组件
React/Redux/react-router Snippets React/Redux/react-router语法智能提示
JavaScript(ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Highlight Matching Tag 标签匹配高亮，支持 jsx，html 及主流的 vue,ng
changelog 悬浮可以查看安装包在github发布changelog的相关信息
Better package.json 可以直观看到当前安装版本和期望看到的版本隔了多少版本
Color Manager 一个很酷炫的颜色管理插件，很强大
Intelli Refactor 提供类似 JetBrain 的快速代码重构功能
NestJs Snippets NG 即视感的 NodeJS 框架，常用的都说好！！
ESLint 代码规范校验（无规矩，不成方圆。为了少些bug，这个还是很必要的）
lit-html js代码中进行html元素提示
HTML Snippets 智能提示HTML标签，以及标签含义
Prettier - Code formatter 描述：VS Code包使用Prettier格式化您的JavaScript / TypeScript / CSS(Ctrl+Shift+P)
Minify 它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。
NPM 所有开发者应该都认识NPM，其全称是Node Package Manager（node包管理器）。该扩展插件有助于管理Package.json，当生产环境依赖包未安装时会发出警告，并确保安装的版本正确。
Live Sass Compiler LiveSass Compiler虽然很小，但功能极其强大，它可以将SASS /SCSS文件实时编译为CSS文件，并在浏览器中展示已编译样式的实时预览。

其他

back

  • Python

git

back

  • Git Graph
    图形化 git log ，还支持代码对比这些
  • Git History
    描述：git历史，搜索，log等等
  • Git File History
    动态的查看文件git的历史记录，比如代码区域的变动！很炫！
  • Git Project Manager
    描述：git的项目管理，VSCode窗口打开一个面向git存储库的新窗口
  • GitLens — Git supercharged
    描述：可以帮助我们通过Git注释和代码镜头一目了然地查看代码作者身份，无缝导航和Git探索，特别是团队协作好用，看到代码原作者
  • RemoteHub
    将github项目直接在本地打开（再也不需要clone项目了）
  • 10.BracketPairColorizer
  • 12.filesize
  • 13.ImportCost
    描述：在编辑器中显示导入包的大小，可配置
  • 14.PathIntellisense
  • 15.WakaTime
  • 16.GitLens
  • 17.RESTClient
    REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。
  • 18.NpmIntellisense
  • 19.AzureStorage
  • 21.SVN
  • 22.Dashboard
  • 23.Data Preview
  • 24.Jumpy
  • 25.Placeholder Images
  • 26.VSCode Faker
  • 27.WordCounter
  • Vetur
    描述：用vue必装
  • Vue Peek
    描述：点击父组件快速导航到vue子组件
  • open in browser
    描述：可以直接打开html文件
  • carbon-now-sh
    描述：源代码语法高亮插件
  • Code Runner
    描述：运行多种语言的代码片段或代码文件，详细看安装好后的描述使用
  • File Peek
    描述：此扩展扩展了Typescript和Javascript代码编辑，支持在源代码中的字符串中找到的文件名
  • filesize
    描述：显示当前文件大小，可以为优化提供一些帮助
  • Image preview
    描述：引入图片左侧导航条显示图像预览，好用很强大
  • javascript console utils
    描述：快捷键快速打log，很好用Cmd+Shift+L
  • Path Autocomplete
    描述：路径自动补全，很强大
  • Path Intellisense
    描述：同上，差不多的功能
  • Sass
    描述：用Sass必装
  • Search node_modules
    描述：搜索快速导航和打开文件node_modules的某个包位置
  • 小程序助手
    描述：对小程序项目的 .wxss和.wxml类别文件进行识别高亮

filesize

在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间

PathIntellisense

可自动填充文件名。

WakaTime

back

从您的编程活动自动生成的度量标准，见解和时间跟踪.

GitLens

git日志查看插件
GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

NpmIntellisense

用于在 import 语句中自动填充 npm 模块
require 时的包提示（最新版的vscode已经集成此功能）

AzureStorage

VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。按照本教程从VS Code部署Web应用程序到Azure存储。

ProjectManager

它可以帮助您轻松访问项目，无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目，或选择自动检测VSCode项目，Git，Mercurial和SVN存储库或任何文件夹。

从版本8开始，您就有了专门的项目活动栏！

以下是Project Manager提供的一些功能：

将任何项目保存为收藏夹
自动检测VSCode，GIT中，水银或SVN存放区
在相同或新窗口中打开项目
识别已删除/重命名的项目
一个状态栏标识当前项目
专门的活动栏

SVN

21.Language Support for Java(TM) by Red Hatredhat.java

这个插件，这个下载次数，安装就对了。

22.Todo Tree

此扩展可以快速搜索（使用ripgrep）您的工作区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。

找到的TODO也可以在打开的文件中突出显示。

24.快速注释 Document This

es6Sinppets

  • import export
Trigger Content
imp→ imports entire module import fs from 'fs';
imn→ imports entire module without module name import 'animate.css'
imd→ imports only a portion of the module using destructing import {rename} from 'fs';
ime→ imports everything as alias from the module import * as localAlias from 'fs';
ima→ imports only a portion of the module as alias import { rename as localRename } from 'fs';
rqr→ require package require('');
mde→ default module.exports module.exports = {};
enf→ exports name function export const log = (parameter) => { console.log(parameter);};
edf→ exports default function export default (parameter) => { console.log(parameter);};
ecl→ exports default class export default class Calculator { };
ece→ exports default class by extending a base one export default class Calculator extends BaseClass { };
  • Class helpers
Trigger Content
con→ adds default constructor in the class constructor() {}
met→ creates a method inside a class add() {}
pge→ creates a getter property get propertyName() {return value;}
pse→ creates a setter property set propertyName(value) {}
  • Various methods
Trigger Content
fre→ forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→ for ... of loop for(const item of object) {}
fin→ for ... in loop for(const item in object) {}
anfn→ creates an anonymous function (params) => {}
nfn→ creates a named function const add = (params) => {}
dob→ destructing object syntax const {rename} = fs
dar→ destructing array syntax const [first, second] = [1,2]
sti→ set interval helper method setInterval(() => {});
sto→ set timeout helper method setTimeout(() => {});
prom→ creates a new Promise return new Promise((resolve, reject) => {});
thenc→ adds then and catch declaration to a promise .then((res) => {).catch((err) => {});
  • Console methods
Trigger Content
cas→ console alert method console.assert(expression, object)
ccl→ console clear console.clear()
cco→ console count console.count(label)
cdi→ console dir console.dir
cer→ console error console.error(object)
cgr→ console group console.group(label)
cge→ console groupEnd console.groupEnd()
clg→ console log console.log(object)
clo→ console log object with name console.log('object :', object);
ctr→ console trace console.trace(object)
cwa→ console warn console.warn
cin→ console info console.info
clt→ console table console.table
cti→ console time console.time
cte→ console timeEnd console.timeEnd

SettingSync

最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了.

  • Sync Setting GitHub Token

token:e5b5bd785ca221d4c082d03c0ff370873f49a785 GIST id:ac5f53dc2d039787d974a975a87e033b

  • 提示token无效或者已过期的时候，解决方案

第一次通过shift+alt+u配置上传信息的时候token填错了，就报RT所示的错误。
期间尝试过卸载setting sync然后重新安装依然报同样的错误。
猜想上传的配置信息文件并不在setting sync插件的安装目录里面。于是通过查找资料发现了配置文件的位置，如下：C:\Users\yourusername\AppData\Roaming\Code\User
找到里面的syncLocalSettings.json文件，打开该文件搜索token，然后修改token对应的值即可。

CodeSpellChecker

代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。

DebuggerforChrome

back

从VS Code调试在Google Chrome中运行的JavaScript代码。

  • 在自己的html工程目录下面点击f5,或者在左侧选择调试按钮
  • 之后会出现laungh.json的配置文件在自己的项目目录下面

hookSnippet

back

hooks keys
useState Type ush to use state hook!
useEffect Type ueh to use effect hook!
useContext Type uch to use context hook!
useCallback Type ucbh to use call back hook!
useMemo Type umh to use memo hook!
useRef Type urh to use ref hook
useReducer Type urdh to use reducer hook
useSelector Type uss to u``se selector hook
useDispatchFunction Type usdf to u``se dispatch function hook
useDispatch Type usd to u``se dispatch hook
import React hooks Type irh to import React and the most commonly used hooks
import React Redux hooks Type irrh to import react redux hooks
import react hooks Type irh to import react hooks
prev state Type prev to use previous state