vsCode插件+vsCode快捷键

常用插件

Chinese

汉化

Git History

git的提交记录，目录或文件上右击 Git:View File History

Auto Close Tag

自动闭合标签

Auto Rename Tag

自动重命名标签

Beautify

格式化代码：javascript, JSON, CSS, Sass, and HTML

Bracket Pair Colorizer

给括号加对应颜色

Color Highlight

代码高亮

CSS Peek

划过样式名，能看到样式内容，ctrl+点击样式名，跳转到样式定义

ES7 React/Redux/GraphQL/React-Native snippets

js ts react 的快速输入法
部分常用：

rccp
类组件定义
rfcredux
react-redux connect+2map代码片段
reduxmap
mapState 和 mapDispatch 片段
imp→ import moduleName from 'module'
imn→ import 'module'
imd→ import { destructuredModule } from 'module'
cs→ const { } = this.state
cp→ const { } = this.props
imrc→ import React, { Component } from 'react'
imrr→ import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
imbr→ import { BrowserRouter as Router} from 'react-router-dom'
imbrc→ import { Route, Switch, NavLink, Link } from react-router-dom'
imbrr→ import { Route } from 'react-router-dom'
imbrs→ import { Switch } from 'react-router-dom'
imbrl→ import { Link } from 'react-router-dom'
rconst→ constructor(props) with this.state
rconc→ constructor(props, context) with this.state
clo→ console.log(object, object)
fref→ const ref = React.createRef()
est→ this.state = { }
sst→ this.setState({ })
ssf→ this.setState((state, props) => return { })

cwm→ componentWillMount = () => { } DEPRECATED!!!
cdm→ componentDidMount = () => { }
cwr→ componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
scu→ shouldComponentUpdate = (nextProps, nextState) => { }
cwup→ componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
cdup→ componentDidUpdate = (prevProps, prevState) => { }
cwun→ componentWillUnmount = () => { }
gdsfp→ static getDerivedStateFromProps(nextProps, prevState) { }
gsbu→ getSnapshotBeforeUpdate = (prevProps, prevState) => { }

IntelliSense for CSS class names in HTML

css名自动感知

VS Code JavaScript (ES6) snippets

es6代码片段

JSON Tools

JSON代码格式化
alt+m压缩
ctrl+alt+m 格式化

Lodash

输入"_"符号就会提示lodash所有的的函数

Material Icon Theme

不同文件不同icon图标

Partial Diff

代码差异
选中文本右击 选择比较方式

Path Intellisense

路径智能感知

Vue VSCode Snippets

vue 代码片段
vscode-icons
文件夹图标

Regex Previewer

代码中提示正则

Prettier - Code formatter

代码格式化 选中代码 右键 设置文档的格式

GitLens — Git supercharged

清楚每行代码谁提交

===========================================

Output Colorizer

着色器

JavaScript Snippet Pack

JS代码片段

Image preview

查看图片

markdownlint

绿色曲线提示 不合格代码

HTML Snippets H5

代码片段以及提示

HTML CSS Support

样式提示

Guides

高亮缩进基准线

Font-awesome codes for html (snippets)

html代码提示片段

Dracula Official

黑色的一款主题，好看

Document this

Js的注释模板 ctrl+shift+d 2次

Class autocomplete for HTML

css样式名自动补全

One Dark Theme

主题

ProjectTree

组合按键 Shift+Ctrl+p，输入Project Tree，回车键自动生成项目数状图在README.md文件中