VSCode 前端必备插件
- Debugger for Chrome
让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来
打断点调试
根目录下建立文件.vscode/launch.json{ "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] }
- jQuery Code Snippets
jquery 重度患者必须品 - Path Intellisense
自动路劲补全,默认不带这个功能的 - ESlint
ESlint 接管原生 js 提示,可以自定制提示规则。 - beautify
格式化代码的工具 - Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。 - Auto Close Tag
自动闭合尾部的标签 - GitLens
丰富的git日志插件 - Chinese (Simplified) Language Pack for Visual Studio Code
VSCode 中文资源包 - vscode-fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间,快捷键Ctrl+Alt+i
"fileheader.Author": "william",
"fileheader.LastModifiedBy": "william"
- filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 - Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。 - Code Runner
可以运行C/C++/JAVA/JS/PHP等编程语言,快捷键Ctrl+Alt+N
文件运行在终端
"code-runner.runInTerminal": true
- Minify
css、js、html压缩插件
使用:F1运行文件缩小器 Minify。 - Markdown Preview Enhanced
Markdown预览插件 - koroFileHeader
自动生成文件头部注释,自动更新最后编辑人、最后编辑时间等。
Vue插件
- vetur
语法高亮、智能感知、Emmet等
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 不加分号
"singleQuote": true // 用单引号
}
}
- VueHelper
snippet代码片段 - Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助 - vscode-element-helper
一款 Element 的 VS Code 插件,对Element-UI提供全方位的支持
微信小程序插件
- minapp
微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets) - wechat-snippet
微信小程序代码辅助,代码片段自动完成
Nodejs 一些必备的第三方模块
- live-server
这是一个具有实时重新加载功能的小型开发服务器。使用它来破解HTML / JavaScript / CSS文件,但不能用于部署最终站点。 - webpack(4.x)
- webpack-cli
- gulp
- browser-sync
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 - vue-cli
- 2022年9月15日 增加VSCode配置
"[javascript]": {
// "editor.defaultFormatter": "HookyQR.beautify",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}