// 基本插件
Chinese(Simplified) Language Pack for Visual Stidio Code // 中文汉化包
Live Server // 浏览器实时刷新
open in browser // 在浏览器中查看
Bracket Pair Colorizer // 用不同颜色高亮显示匹配的括号
Vscode-icons // 文件图标
Code Spell Checker // 单词拼写检查
Beautify // 格式化代码的工具
Path Intellisense // 自动路径补全、默认不带这个功能
npm Intellisense // require 时的包提示工具
Improt Cost // 成本提示 这个插件可以在你导入工具包的时候提示这个包的体积，如果体积过大就需要考虑压缩包
// html
HTML Snippets // H5代码片段以及提示
Auto Rename Tag // 修改HTML标签时，自动修改匹配的标签
Auto Close Tag // 自动闭合标签
Highlight Matching Tag // 高亮显示匹配标签
// css
CSS Peek // 可以追踪至样式表中 CSS 类和 id 定义的地方
// js
JavaScript (ES6) code snippets // es6代码提示
jQuery Code Snippets // jQuery代码提示
ESLint // 检查 javascript 语法错误与提示
// vue
Vetur // Vue语言包
VueHelper // Vue2代码段（包括Vue2 api、vue-router2、vuex2）
Vue 2 snippets // vue 代码提示
Vue-color // vue 语法高亮主题
Vscode-element-helper // 自动提示element标签名称
// react
Reactjs code snippets // react 代码提示
React Native Tools // 为React Native项目提供了开发环境。
React-Native/React/Redux snippets for es6/es7 // React native 代码提示
ES7 React/Redux/GraphQL/React-Native snippets // react-cli 提示
// angular
Angular 10 Snippets // angular 代码提示
// git
Git History // 查看 git log
GitLens — Git supercharged // 显示文件最近的commit和作者，显示当前行commit信息
2. 模板配置(文件 ->首选项->用户片段)
"html模板":{
"prefix": "hh",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<title>浅忆</title>",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">",
"\t<style>",
"\t\tbody,p,input,ul,ol,h1,h2,h3,h4{margin:0;padding:0;}",
"\t\tul,ol{list-style:none;}",
"\t\ta{text-decoration: none;}",
"\t</style>",
"</head>",
"",
"<body>",
"\t<div id=\"wrap\">$1</div>",
"",
"\t<script>\n\t\t$2\n\t</script>",
"</body>",
"</html>"
]
}
"Vue模板": {
"prefix": "vue",
"body": [
"<template>",
"\t<div class=\"\">",
"",
"\t</div>",
"</template>",
"",
"<script>",
"export default {",
"\tname: '',",
"\tdata() {",
"\t\treturn {",
"\t\t}",
"\t}",
"}",
"</script>",
"",
"<style scoped lang=\"scss\">",
"",
"</style>",
""
],
"description": "Base for Vue File"
}
3. 参考文章
VSCode拓展推荐（前端开发）
网友评论