vscode使用巧技

1.快捷键

展开折叠代码：ctrl +shift + [ ctrl +shift +]

ctrl+shift+L --同时选中所有相容内容

alt+click --同时选择多个单词

f2 --重命名文件

alt+上下键 --移动整行或多行

1.1

vetur --让.vue文件高亮和有语法提示

Vue VsCode snippets -- 快捷写代码

2.文件图标库--必备

vscode-icon --- 插件库直接安装

3.标识另一半括号 --方便查看代码结构--必备

Bracket Pair Colorizer 插件库里搜

settings里自定义设置

4.主题切换和安装--必备

1）插件库搜名字安装

2）ctrl + k ctrl +t 切换主题

常用主题：

One Dark Pro

Material Theme --安装后默认为绿色--推荐选择 ：Community Material Theme Palenight High Contrast 

5.保存自动格式化代码 --必备

1）安装prettier 插件

2）settings配置中，[JavaScript]项添加 editor。formatOnSave:true配置项

3）setings 中搜索format 勾选format on save ---保存时自动格式化

4）setines 中搜索tabsize 设置为4 tab的时候自动跳四格

6.css peek --必备

预览某个类的css样式 ，Ctrl 点击 可以快速跳转到样式的地方。

7.显示tab 空格标识

1）打开setting,在搜索框中输入renderControlCharacters,选中勾选框,即可显示tab

2）在搜索框中输入renderWhitespace,选择all,即可显示空格.

8.切换语言

1）ctrl + shift +p 调出命令

2）输入：configure language 进入语言配置项

3）locale后面重新输入冒号选择语言zh-CN

9.截图

1）下载插件 polacode

2）ctrl + p 输入polacode使用

10.booster代码助推器

1）下载插件booster

2）js中使用

11.安装透明插件opacity

插件库直接搜opacity --设置里调整透明度

12.接口调试工具

插件安装REST Client

建一个http后缀文件

POST http://139.9.177.51:3331/login.php HTTP/1.1

Content-Type: application/json

{
    "username":"aaaa",
    "pwd":"111111"  
}

14.simple react snippets--react必备

常用命令

imr	Import React
imrc	Import React / Component
imrs	Import React / useState
imrse	Import React / useState useEffect
impt	Import PropTypes
impc	Import React / PureComponent
cc	Class Component
ccc	Class Component With Constructor
cpc	Class Pure Component
sfc	Stateless Function Component
cdm	componentDidMount
uef	useEffect Hook
cwm	componentWillMount
cwrp	componentWillReceiveProps
gds	getDerivedStateFromProps
scu	shouldComponentUpdate
cwu	componentWillUpdate
cdu	componentDidUpdate
cwu	componentWillUpdate
cdc	componentDidCatch
gsbu	getSnapshotBeforeUpdate
ss	setState
ssf	Functional setState
usf	Declare a new state variable using State Hook
ren	render
rprop	Render Prop
hoc	Higher Order Component

15.多文件点击预览不覆盖上一个

配置中搜 enablePreview 去掉控制打开的编辑器是否显示为预览

16.webpack打包器的依赖包体积分析工具

 webpack-bundle-analyzer

http://www.playsn.com/webpack%E6%89%93%E5%8C%85%E5%99%A8%E7%9A%84%E4%BE%9D%E8%B5%96%E5%8C%85%E4%BD%93%E7%A7%AF%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7/

https://www.jianshu.com/p/a25a533608c8

17.GitLens

查看谁编译的代码

18.自定义代码片段

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "rccc": {
    "prefix": "rccc",
    "body": [
      "import { Component } from 'react';",
      "import styled from 'styled-components';",
      "type TProps = {};",

      "type TState = {};",

      "const StyledDiv = styled.div``;",
      "class T extends Component<TProps, TState> {",
      "constructor(props: TProps) {",
      "super(props);",
      "this.state = {};",
      "}",
      "render() {",
      "return <StyledDiv></StyledDiv>;",
      "}",
      "}",

      "export default T;"
    ],
    "description": "Log output to console"
  }
}

19.vue插件 Vetur 和 Volar

volar 是 vue3 的配套，vetur 是 vue2 的配套

vetur可能会导致vue2项目的ts语法报错 故择版本来使用