vscode 前端扩展建议

开源，帮助方便，使用简单，占系统资源少，提供丰富的插件，界面很赞

• vs code 汉化

名称: Chinese (Simplified) Language Pack for Visual Studio Code
ID: ms-ceintl.vscode-language-pack-zh-hans
说明: Language pack extension for Chinese (Simplified)
版本: 1.48.1
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

• 自动关闭标签

名称: Auto Close Tag
ID: formulahendry.auto-close-tag
说明: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
版本: 0.5.8
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

• 自动重命名标签

名称: Auto Rename Tag
ID: formulahendry.auto-rename-tag
说明: Auto rename paired HTML/XML tag
版本: 0.1.4
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

• 编辑器背景

名称: background
ID: shalldie.background
说明: A simple tool to make your vscode's background look better!
版本: 1.1.26
发布者: shalldie
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=shalldie.background

• 代码对齐线，颜色区分

名称: Bracket Pair Colorizer
ID: coenraads.bracket-pair-colorizer
说明: A customizable extension for colorizing matching brackets
版本: 1.0.61
发布者: CoenraadS
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

• 在浏览器打开静态资源，以本地服务的形式

名称: Browser Preview
ID: auchenberg.vscode-browser-preview
说明: A real browser preview inside your editor that you can debug.
版本: 0.6.7
发布者: Kenneth Auchenberg
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

• 谷歌调试

名称: Debugger for Chrome
ID: msjsdiag.debugger-for-chrome
说明: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
版本: 4.12.9
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

• Element提示语法

名称: Element UI Snippets
ID: ss.element-ui-snippets
说明: Code snippets for Element-UI which is a Vue.js 2.0 UI Toolkit for Web
版本: 0.3.5
发布者: Snowffer Studio
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=SS.element-ui-snippets

• React/Redux/GraphQL/React-Native提示语

名称: ES7 React/Redux/GraphQL/React-Native snippets
ID: dsznajder.es7-react-js-snippets
说明: Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
版本: 2.8.3
发布者: dsznajder
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

• ESLint

名称: ESLint
ID: dbaeumer.vscode-eslint
说明: Integrates ESLint JavaScript into VS Code.
版本: 2.1.8
发布者: Dirk Baeumer
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

• 引入文件大小预览

名称: filesize
ID: mkxml.vscode-filesize
说明: Show the current file size in the status bar
版本: 2.1.4
发布者: Matheus Kautzmann
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

• 根据变量，方法快捷跳转

名称: Find-Jump
ID: mksafi.find-jump
说明: Like Ace Jump, but better. Quickly move cursor to visible location
版本: 1.2.4
发布者: M.K. Safi
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=mksafi.find-jump

• git图形化

名称: Git Graph
ID: mhutchie.git-graph
说明: View a Git Graph of your repository, and perform Git actions from the graph.
版本: 1.25.0
发布者: mhutchie
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

• git图形化

名称: Git History
ID: donjayamanne.githistory
说明: View git log, file history, compare branches or commits
版本: 0.6.9
发布者: Don Jayamanne
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

• gitignore文件生成

名称: gitignore
ID: codezombiech.gitignore
说明: Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.
版本: 0.6.0
发布者: CodeZombie
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore

• 非常有名的git管理工具

名称: GitLens — Git supercharged
ID: eamodio.gitlens
说明: Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
版本: 10.2.2
发布者: Eric Amodio
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

• HTML CSS以及jade，pug等等模版引擎语法提示

名称: HTML CSS Support
ID: ecmel.vscode-html-css
说明: CSS support for HTML documents
版本: 0.2.3
发布者: ecmel
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

• html5语法提示

名称: HTML Snippets
ID: abusaidm.html-snippets
说明: Full HTML tags including HTML5 Snippets
版本: 0.2.1
发布者: Mohamed Abusaid
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

• 图片预览

名称: Image preview
ID: kisstkondoros.vscode-gutter-preview
说明: Shows image preview in the gutter and on hover

版本: 0.26.2
发布者: Kiss Tamás
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

• import引入信息

名称: Import Cost
ID: wix.vscode-import-cost
说明: Display import/require package size in the editor
版本: 2.12.0
发布者: Wix
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

• es6语法提示

名称: JavaScript (ES6) code snippets
ID: xabikos.javascriptsnippets
说明: Code snippets for JavaScript in ES6 syntax
版本: 1.8.0
发布者: charalampos karypidis
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

• jquery语法提示

名称: jQuery Code Snippets
ID: donjayamanne.jquerysnippets
说明: Over 130 jQuery Code Snippets
版本: 0.0.1
发布者: Don Jayamanne
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets

• 快捷创建一个本地服务

名称: Live Server
ID: ritwickdey.liveserver
说明: Launch a development local Server with live reload feature for static & dynamic pages
版本: 5.6.1
发布者: Ritwick Dey
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

• markdown提示语法检测

名称: markdownlint
ID: davidanson.vscode-markdownlint
说明: Markdown linting and style checking for Visual Studio Code
版本: 0.36.3
发布者: David Anson
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

• 微信小程序语法提示

名称: minapp
ID: qiu8310.minapp-vscode
说明: 微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
版本: 2.2.2
发布者: Mora Qiu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode

• mysql数据库连接插件

名称: MySQL
ID: formulahendry.vscode-mysql
说明: MySQL management tool
版本: 0.4.0
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.vscode-mysql

• npm插件

名称: npm
ID: eg2.vscode-npm-script
说明: npm support for VS Code
版本: 0.3.13
发布者: egamma
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

• npm scripts插件

名称: npm
ID: fknop.vscode-npm
说明: npm commands for VSCode
版本: 3.3.0
发布者: Florian Knop
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=fknop.vscode-npm

• npm引入包提示

名称: npm Intellisense
ID: christian-kohler.npm-intellisense
说明: Visual Studio Code plugin that autocompletes npm modules in import statements
版本: 1.3.0
发布者: Christian Kohler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

• 在浏览器上打开

名称: open in browser
ID: techer.open-in-browser
说明: This allows you to open the current file in your default browser or application.
版本: 2.0.0
发布者: TechER
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

• 路径自动填充

名称: Path Autocomplete
ID: ionutvmi.path-autocomplete
说明: Provides path completion for visual studio code.
版本: 1.15.0
发布者: Mihai Vilcu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

• 路径提示

名称: Path Intellisense
ID: christian-kohler.path-intellisense
说明: Visual Studio Code plugin that autocompletes filenames
版本: 2.2.1
发布者: Christian Kohler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

• 代码格式化

名称: Prettier - Code formatter
ID: esbenp.prettier-vscode
说明: Code formatter using prettier
版本: 5.1.3
发布者: Prettier
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

• 项目管理

名称: Project Manager
ID: alefragnani.project-manager
说明: Easily switch between projects
版本: 11.1.0
发布者: Alessandro Fragnani
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

• react-native工具

名称: React Native Tools
ID: msjsdiag.vscode-react-native
说明: Debugging and integrated commands for React Native
版本: 0.17.0
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native

• 正则匹配测试

名称: Regex Previewer
ID: chrmarti.regex
说明: Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.
版本: 0.2.0
发布者: Christof Marti
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

• vscode 配置自动云存储

名称: Settings Sync
ID: shan.code-settings-sync
说明: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
版本: 3.4.3
发布者: Shan Khan
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

• sftp插件

名称: SFTP
ID: liximomo.sftp
说明: SFTP/FTP sync
版本: 1.12.9
发布者: liximomo
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

• TODO高亮语法

名称: TODO Highlight
ID: wayou.vscode-todo-highlight
说明: highlight TODOs, FIXMEs, and any keywords, annotations...
版本: 1.0.4
发布者: Wayou Liu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

• typescript语法提示

名称: TSLint
ID: ms-vscode.vscode-typescript-tslint-plugin
说明: TSLint support for Visual Studio Code
版本: 1.2.3
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

• vue项目插件工具包

名称: Vetur
ID: octref.vetur
说明: Vue tooling for VS Code
版本: 0.26.1
发布者: Pine Wu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=octref.vetur

• vscode文件图标

名称: vscode-icons
ID: vscode-icons-team.vscode-icons
说明: Icons for Visual Studio Code
版本: 10.2.0
发布者: VSCode Icons Team

VS Marketplace 链接: https://tmarketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons