vscode这篇就够了

# 前言

本文档用于记录vscode的使用技巧,持续更新中

# 参考文档

https://juejin.im/post/5d34fdfff265da1b897b0c8d#heading-16

# 快捷键

# 搜索文本

搜索当前文件

Windows: Ctrl + F Mac: Command + F

搜索所有文件

Windows: Ctrl + Shift + F Mac: Command + Shift + F

# 打开关闭了的页面

Windows: Ctrl + Shift + T Mac: command + Shift + T

# 终端

打开关闭终端

Ctrl + `

终端+1

Ctrl + Shift + `

终端分屏

Mac: command + \

# 切换不同的项目

Mac: command+ `

# 切换选项卡

Windows: Ctrl + Alt +右箭头  Mac: Control + Option +右箭头
Windows: Ctrl + Alt +左箭头  Mac: Control + Option +左箭头

# 批量替换当前文件中所有匹配的文本

Windows: Ctrl + F2  Mac: command + F2

# 向上/向下移动一行

Windows: Alt + 向上箭头  Mac: option+ 向上箭头

# 复制行

Mac: alt+shift+方向键

# 多光标

Windows: Ctrl + Alt +向上箭头  Mac: command + Option +向上箭头

# 插件

带星的为极力推荐的插件

# * Auto Close Tag

# * Auto Rename Tag

修改html标签时自动帮我们重命名

# * Document This

注释js代码

# * EditorConfig for VS Code

这个插件会用项目里的.editorconfig文件覆盖vscode的设置

# * ESLint

eslint检查代码规范

# * Git History

git历史

# * GitLens — Git supercharged

每个文件每行都会显示修改信息,非常推荐

cmd/ctrl+click跳转到npmjs.com

# * npm Intellisense

自动填写npm模块

# * npm-import-package-version

显示npm包引入的版本号,支持js ts vue

# * Path Intellisense

自动填写文件路径

# * Prettier - Code formatter

美化

# * Settings Sync

同步vscode设置,非常推荐

# * TODO Highlight

# * Vetur

使用vue就装上

# * vscode-fileheader

快速生成文件头注释

# * vscode-icons

文件根据不同后缀显示不同的图标

# * vue

# Auto Import - ES6, TS, JSX, TSX

自动引入依赖包

# Beautify

美化代码

# Bracket Pair Colorizer

# Check Updates of NPM Packages

在后台检查npm包是否可以更新,并会提示你

# ES7 React/Redux/GraphQL/React-Native snippets

# filesize

显示文件大小

# Full React/React Native/React Router/Redux/GraphQL/ES7/Testing/PropTypes snippets

# Highlight Line

高亮选中的行

# Highlight Matching Tag

高亮匹配的标签

# HTML CSS Support

# HTML SCSS Support

# HTML Snippets

# html tag wrapper

用div包裹选中的代码,ctrl+i

# Image preview

在编辑器左侧显示图片缩略图

# Live Server

起一个服务

# npm

支持跑npm脚本

# Npm Dependency

更新依赖包

# open-in-browser

# Partial Diff

对比不同

# Rainbow Brackets

匹配括号

# SVG Viewer

# Toggle Quotes

# TSLint

# Turbo Console Log

快速的添加console

# View In Browser

# vscode-elm-jump

# vscode-styled-jsx

# WakaTime

记录你用vscode工作的时间,项目等

# REST Client

管理接口