vscode 前端擴(kuò)展建議

開(kāi)源，幫助方便，使用簡(jiǎn)單，占系統(tǒng)資源少，提供豐富的插件，界面很贊

• vs code 漢化

名稱(chēng): Chinese (Simplified) Language Pack for Visual Studio Code
ID: ms-ceintl.vscode-language-pack-zh-hans
說(shuō)明: Language pack extension for Chinese (Simplified)
版本: 1.48.1
發(fā)布者: Microsoft
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

• 自動(dòng)關(guān)閉標(biāo)簽

名稱(chēng): Auto Close Tag
ID: formulahendry.auto-close-tag
說(shuō)明: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
版本: 0.5.8
發(fā)布者: Jun Han
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

• 自動(dòng)重命名標(biāo)簽

名稱(chēng): Auto Rename Tag
ID: formulahendry.auto-rename-tag
說(shuō)明: Auto rename paired HTML/XML tag
版本: 0.1.4
發(fā)布者: Jun Han
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

• 編輯器背景

名稱(chēng): background
ID: shalldie.background
說(shuō)明: A simple tool to make your vscode's background look better!
版本: 1.1.26
發(fā)布者: shalldie
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=shalldie.background

• 代碼對(duì)齊線(xiàn)，顏色區(qū)分

名稱(chēng): Bracket Pair Colorizer
ID: coenraads.bracket-pair-colorizer
說(shuō)明: A customizable extension for colorizing matching brackets
版本: 1.0.61
發(fā)布者: CoenraadS
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

• 在瀏覽器打開(kāi)靜態(tài)資源，以本地服務(wù)的形式

名稱(chēng): Browser Preview
ID: auchenberg.vscode-browser-preview
說(shuō)明: A real browser preview inside your editor that you can debug.
版本: 0.6.7
發(fā)布者: Kenneth Auchenberg
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

• 谷歌調(diào)試

名稱(chēng): Debugger for Chrome
ID: msjsdiag.debugger-for-chrome
說(shuō)明: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
版本: 4.12.9
發(fā)布者: Microsoft
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

• Element提示語(yǔ)法

名稱(chēng): Element UI Snippets
ID: ss.element-ui-snippets
說(shuō)明: Code snippets for Element-UI which is a Vue.js 2.0 UI Toolkit for Web
版本: 0.3.5
發(fā)布者: Snowffer Studio
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=SS.element-ui-snippets

• React/Redux/GraphQL/React-Native提示語(yǔ)

名稱(chēng): ES7 React/Redux/GraphQL/React-Native snippets
ID: dsznajder.es7-react-js-snippets
說(shuō)明: Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
版本: 2.8.3
發(fā)布者: dsznajder
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

• ESLint

名稱(chēng): ESLint
ID: dbaeumer.vscode-eslint
說(shuō)明: Integrates ESLint JavaScript into VS Code.
版本: 2.1.8
發(fā)布者: Dirk Baeumer
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

• 引入文件大小預(yù)覽

名稱(chēng): filesize
ID: mkxml.vscode-filesize
說(shuō)明: Show the current file size in the status bar
版本: 2.1.4
發(fā)布者: Matheus Kautzmann
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

• 根據(jù)變量，方法快捷跳轉(zhuǎn)

名稱(chēng): Find-Jump
ID: mksafi.find-jump
說(shuō)明: Like Ace Jump, but better. Quickly move cursor to visible location
版本: 1.2.4
發(fā)布者: M.K. Safi
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=mksafi.find-jump

• git圖形化

名稱(chēng): Git Graph
ID: mhutchie.git-graph
說(shuō)明: View a Git Graph of your repository, and perform Git actions from the graph.
版本: 1.25.0
發(fā)布者: mhutchie
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

• git圖形化

名稱(chēng): Git History
ID: donjayamanne.githistory
說(shuō)明: View git log, file history, compare branches or commits
版本: 0.6.9
發(fā)布者: Don Jayamanne
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

• gitignore文件生成

名稱(chēng): gitignore
ID: codezombiech.gitignore
說(shuō)明: Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.
版本: 0.6.0
發(fā)布者: CodeZombie
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore

• 非常有名的git管理工具

名稱(chēng): GitLens — Git supercharged
ID: eamodio.gitlens
說(shuō)明: 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
發(fā)布者: Eric Amodio
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

• HTML CSS以及jade，pug等等模版引擎語(yǔ)法提示

名稱(chēng): HTML CSS Support
ID: ecmel.vscode-html-css
說(shuō)明: CSS support for HTML documents
版本: 0.2.3
發(fā)布者: ecmel
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

• html5語(yǔ)法提示

名稱(chēng): HTML Snippets
ID: abusaidm.html-snippets
說(shuō)明: Full HTML tags including HTML5 Snippets
版本: 0.2.1
發(fā)布者: Mohamed Abusaid
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

• 圖片預(yù)覽

名稱(chēng): Image preview
ID: kisstkondoros.vscode-gutter-preview
說(shuō)明: Shows image preview in the gutter and on hover

版本: 0.26.2
發(fā)布者: Kiss Tamás
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

• import引入信息

名稱(chēng): Import Cost
ID: wix.vscode-import-cost
說(shuō)明: Display import/require package size in the editor
版本: 2.12.0
發(fā)布者: Wix
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

• es6語(yǔ)法提示

名稱(chēng): JavaScript (ES6) code snippets
ID: xabikos.javascriptsnippets
說(shuō)明: Code snippets for JavaScript in ES6 syntax
版本: 1.8.0
發(fā)布者: charalampos karypidis
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

• jquery語(yǔ)法提示

名稱(chēng): jQuery Code Snippets
ID: donjayamanne.jquerysnippets
說(shuō)明: Over 130 jQuery Code Snippets
版本: 0.0.1
發(fā)布者: Don Jayamanne
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets

• 快捷創(chuàng)建一個(gè)本地服務(wù)

名稱(chēng): Live Server
ID: ritwickdey.liveserver
說(shuō)明: Launch a development local Server with live reload feature for static & dynamic pages
版本: 5.6.1
發(fā)布者: Ritwick Dey
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

• markdown提示語(yǔ)法檢測(cè)

名稱(chēng): markdownlint
ID: davidanson.vscode-markdownlint
說(shuō)明: Markdown linting and style checking for Visual Studio Code
版本: 0.36.3
發(fā)布者: David Anson
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

• 微信小程序語(yǔ)法提示

名稱(chēng): minapp
ID: qiu8310.minapp-vscode
說(shuō)明: 微信小程序標(biāo)簽、屬性的智能補(bǔ)全（同時(shí)支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
版本: 2.2.2
發(fā)布者: Mora Qiu
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode

• mysql數(shù)據(jù)庫(kù)連接插件

名稱(chēng): MySQL
ID: formulahendry.vscode-mysql
說(shuō)明: MySQL management tool
版本: 0.4.0
發(fā)布者: Jun Han
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=formulahendry.vscode-mysql

• npm插件

名稱(chēng): npm
ID: eg2.vscode-npm-script
說(shuō)明: npm support for VS Code
版本: 0.3.13
發(fā)布者: egamma
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

• npm scripts插件

名稱(chēng): npm
ID: fknop.vscode-npm
說(shuō)明: npm commands for VSCode
版本: 3.3.0
發(fā)布者: Florian Knop
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=fknop.vscode-npm

• npm引入包提示

名稱(chēng): npm Intellisense
ID: christian-kohler.npm-intellisense
說(shuō)明: Visual Studio Code plugin that autocompletes npm modules in import statements
版本: 1.3.0
發(fā)布者: Christian Kohler
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

• 在瀏覽器上打開(kāi)

名稱(chēng): open in browser
ID: techer.open-in-browser
說(shuō)明: This allows you to open the current file in your default browser or application.
版本: 2.0.0
發(fā)布者: TechER
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

• 路徑自動(dòng)填充

名稱(chēng): Path Autocomplete
ID: ionutvmi.path-autocomplete
說(shuō)明: Provides path completion for visual studio code.
版本: 1.15.0
發(fā)布者: Mihai Vilcu
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

• 路徑提示

名稱(chēng): Path Intellisense
ID: christian-kohler.path-intellisense
說(shuō)明: Visual Studio Code plugin that autocompletes filenames
版本: 2.2.1
發(fā)布者: Christian Kohler
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

• 代碼格式化

名稱(chēng): Prettier - Code formatter
ID: esbenp.prettier-vscode
說(shuō)明: Code formatter using prettier
版本: 5.1.3
發(fā)布者: Prettier
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

• 項(xiàng)目管理

名稱(chēng): Project Manager
ID: alefragnani.project-manager
說(shuō)明: Easily switch between projects
版本: 11.1.0
發(fā)布者: Alessandro Fragnani
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

• react-native工具

名稱(chēng): React Native Tools
ID: msjsdiag.vscode-react-native
說(shuō)明: Debugging and integrated commands for React Native
版本: 0.17.0
發(fā)布者: Microsoft
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native

• 正則匹配測(cè)試

名稱(chēng): Regex Previewer
ID: chrmarti.regex
說(shuō)明: Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.
版本: 0.2.0
發(fā)布者: Christof Marti
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

• vscode 配置自動(dòng)云存儲(chǔ)

名稱(chēng): Settings Sync
ID: shan.code-settings-sync
說(shuō)明: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
版本: 3.4.3
發(fā)布者: Shan Khan
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

• sftp插件

名稱(chēng): SFTP
ID: liximomo.sftp
說(shuō)明: SFTP/FTP sync
版本: 1.12.9
發(fā)布者: liximomo
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

• TODO高亮語(yǔ)法

名稱(chēng): TODO Highlight
ID: wayou.vscode-todo-highlight
說(shuō)明: highlight TODOs, FIXMEs, and any keywords, annotations...
版本: 1.0.4
發(fā)布者: Wayou Liu
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

• typescript語(yǔ)法提示

名稱(chēng): TSLint
ID: ms-vscode.vscode-typescript-tslint-plugin
說(shuō)明: TSLint support for Visual Studio Code
版本: 1.2.3
發(fā)布者: Microsoft
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

• vue項(xiàng)目插件工具包

名稱(chēng): Vetur
ID: octref.vetur
說(shuō)明: Vue tooling for VS Code
版本: 0.26.1
發(fā)布者: Pine Wu
VS Marketplace 鏈接: https://marketplace.visualstudio.com/items?itemName=octref.vetur

• vscode文件圖標(biāo)

名稱(chēng): vscode-icons
ID: vscode-icons-team.vscode-icons
說(shuō)明: Icons for Visual Studio Code
版本: 10.2.0
發(fā)布者: VSCode Icons Team

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