Auto Close Tag — automatically closes HTML tags ( Allison )
Auto Rename Tag — When modifying HTML tags, automatically modify matching tags ( Jiajia )
background — background
beautify — javascript, JSON, CSS, Sass, HTML code highlighting
Beautify css/sass/scss/less — code highlighting
CSS Peek — find CSS files automatically
Debugger for Chrome — 调试JavaScript
Easy Sass — scss/sass file saving can be automatically generated and synchronously compiled into a css file of the same name
Easy WXLESS — dedicated to WeChat applet WXSS files, saving can be automatically generated and synchronously compiled into a css file of the same name
File Peek - Move the mouse to the path name and hold down ctrl to open the file ( Jiajia )
Git History — git log
GitLens — Displays the most recent commit and author of the file, and displays the commit information of the current line
HTML Class Suggestions — class name naming hints
HTML CSS Support — Smart Completion for CSS
HTML Snippets — carriage return or tap to generate tags
Indenticator — indent highlighting
IntelliSense for CSS class names — hints for intelligent naming of CSS class names
JavaScript (ES6) code snippets — JS syntax hints
JavaScript Snippet Pack - Code Snippets (Tab or Enter Completion), Console Commands, DOM - Document Object Model, Loop, Function, Timer, NodeJS, BDD, Misc
Live Server — http server (equivalent to http-server using nodejs, preferences-settings-user settings can be configured to change the port: "liveServer.settings.port": 8999)
npm — run npm commands
npm Intellisense - when importing a module, prompt for installed module name
OneDark-Pro — Atom's ionic theme (Preferences-Color Themes modify the theme)
Output Colorizer — color output information
Path Intellisense — auto-completion when entering a path in the editor
Prettier-Code formatter — code formatting (four spaces indent: "prettier.tabWidth": 4)
px2rem — px value to rem
stylelint — CSS/SCSS/LESS inspection tool
(Preferences - Settings - User Settings configuration:
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
)
SVG Viewer — preview SVG images
Vetur — Vue syntax highlighting
VSCode Great Icons — File Icons (Preferences - File Icon Theme Modification)
VSCode-Element-Helper — elementUI syntax hint highlighting
vue — Vue syntax highlighting (
Preferences - Settings - User Settings config:
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
})
Vue 2 Snippets — Added syntax highlighting based on the latest Vue official syntax highlighting files, and added code completion based on the Vue 2 API
Vue Peek — find vue component files
VueHelper — vue code hint plugin, including all vue2 api, vue-router2 and vuex2 code hints
Preferences-Settings-User Settings Configuration:
applet syntax highlighting:
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.wxml": "html ",
"*.wxss": "css"
}
Personal habit configuration:
"editor.lineHeight": 26, // line height
"editor.fontSize": 16, // font
"editor.wordWrap": "on" // automatic line wrapping
"editor.formatOnSave": true // save Automatically format code