VS-Code常用插件+模板配置

作者: 浅忆_0810 | 来源:发表于2020-09-29 00:26 被阅读0次

VS-Code常用插件+模板配置
vscode常用配置和插件
idea类和方法模版设置
vim配置python相关插件
5.文档 - gitbook - 插件
Chrome 常用插件配置
我的vs-code插件安装(待整理)
Vim配置
less样式
Gulp 相关插件

1. 常用插件

// 基本插件
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"
}