美文网首页
VS-Code常用插件+模板配置

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

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

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"
}

3. 参考文章

VSCode拓展推荐(前端开发)

相关文章

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

    1. 常用插件[https://www.jianshu.com/p/fd945e8e099d] 2. 模板配置...

  • vscode常用配置和插件

    常用配置 常用配置1 常用插件 划线的不用下载

  • idea类和方法模版设置

    方法模板的配置网上都有的,这边介绍下用了阿里规范插件通用的模板 使用默认配置的方法模板 这样阿里规范插件检测就是不...

  • vim配置python相关插件

    配置vim插件管理工具配置vim-pathogen配置vimogen 配置常用插件YouCompleteMeneo...

  • 5.文档 - gitbook - 插件

    参考 官方插件 重点参考 GitBook 插件 常用插件 配置插件 到 官方插件 上找合适的插件 在配置文件中安装...

  • Chrome 常用插件配置

    Chrome 插件配置 常用Chrome插件配置,清爽便捷你的浏览 插件名称作用简述Adblock Plus阻止 ...

  • 我的vs-code插件安装(待整理)

    我的vs-code 插件 auto close tag auto conplete tag auto rename...

  • Vim配置

    Vim 安装 安装Vundle 配置.vimrc 个人喜好常用配置 安装插件

  • less样式

    less样式常用插件 less样式常用插件easy less(Vscode搜索安装即可) 配置:首选项>设置>扩展...

  • Gulp 相关插件

    常用插件 gulp-jade (因版权原因已经改名 pug)HTML 模板引擎 gulp-jadeHTML 模板引...

网友评论

      本文标题:VS-Code常用插件+模板配置

      本文链接:https://www.haomeiwen.com/subject/jbybsktx.html