2021vsCode常用的插件,插件,皮肤、vue提示、sass rem...

本文介绍了Visual Studio Code(VSCode)中的一系列高效插件,包括代码美化、自动补全、调试、主题和语法支持等,如Prettier、ESLint、Vetur、Debugger for Chrome等,旨在帮助开发者提升编码体验和工作效率。
摘要由CSDN通过智能技术生成

Chinese (Simplified) Language Pack for Visual Studio Code       // 代码的中文(简化)语言包插件

[Deprecated] Debugger for Chrome           // Chrome的调试器插件

CSS Peek                                         // 通过css选择器快速跳至css文件                                                                                 Cmd+鼠标单击/Ctrl+鼠标单击

HTML CSS Support                                      //HTML CSS支持插件

HTML Snippets                                             //HTML片段插件

Auto Close Tag                                              // 自动关闭标签插件

Auto Rename Tag                                           //自动重命名标签插件

Beautify                                                            // 美化插件

Bracket Pair Colorizer                                     //括号对彩色化插件

Class autocomplete for HTML                        //类自动完成的HTML插件

Code Spell Checker                                          // 拼写检查程序代码插件

Community Material Theme                            //社区材料主题插件

Dracula Official                                                 //吸血鬼官方 主题插件

Easy Sass                                                          // 简单的sass插件

ES7 React/Redux/GraphQL/React-Native snippets     //ES7反应/回来的片段插件

ESLint                                                                // es提示插件

JavaScript (ES6) code snippets                      //JavaScript (ES6)代码片段插件

jQuery Snippets                                                 //jQuery代码片段插件

Live Server                                                         //现场服务器插件

markdownlint                                                    //记号插件

Material Theme                                                 //材料的主题插件

Material Theme Icons                                      // 材料主题图标插件

npm Intellisense                                              //npm智能感知插件

open in browser                                              //打开浏览器插件

Path Intellisense                                             //道路智能感知插件

Prettier - Code formatter                                //Prettier -代码格式化程序插件

px to rem & rpx (cssrem)                             //px 雷姆 + rpx (cssrem) rem插件

Vetur                                                              // Vue提示插件

vscode-icons                                                //vscode 图标插件

Vue 3 Snippets                                             // Vue提示插件

Vuter                                                               //  Vue提示插件

Simple React Snippets                   //  在编辑器中输入imrc然后按下tab键会自动生成import React, { Component } from 'react';输入cc按下tab键会自动生成

JavaScript Booster                                              //作用:当代码中有不够简洁或冗余的代码时,点击插件的灯泡可以优化代码,等多功能参考官网

GitLens               //作用: git history只能查看改动了哪些文件,这个插件可以查看改动内容

Git History                                                   //作用:查看Git历史记录插件

Highlight Matching Tag                // 点击当光标停留在标签时,高亮匹配的标签插件

Tabnine                     //功能:智能提示代码,可以预测你将要写的代码进行提示插件

Debugger for Chrome                  //功能:在VSCode端,调试代码插件插件

path-alias    //场景: 在导入组件的时候,使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)插件

Quokka.js                  //安装插件后,ctrl+shift+p输入Quokka new JavaScr..即可使用实时显示打印输出,更多功能自行探索(常用于测试)插件

Image preview     //功能:当引入路径为图片时,可以预览当前图片插件

Project Manager       //项目管理插件,当开发多个项目时,可以快速跳转插件

vue-component            // 输入组件名称自动导入找到的组件,自动导入路径和组件选中后自动输入组件名(包含必填属性)、import语句、components属性插件

Vue 3 Snippets  //基本必备:很多Vue的代码段,很方便开发插件

vscode-styled-components   //在JS文件中写样式时,有智能提示插件

CSS Initial Value //显示每个CSS属性的初始值,当光标停留在css属性时插件

One Dark Pro  //主题插件

echarts-vscode-extension       //安装插件后,ctrl+shift+p输入active Echars即可开启智能提示功能:提示各种Echar中Option 的属性,挺强大的插件

Vetur vue 插件 自动补全标签,打上一个标签自动引入路径

vue-helper  插件可以使vue开发变得非常的快,自动引入文件路径

林檎的旅行笔记 插件    提示非常丰富

  • 👗 -> 群群模板的代码
  • 🌻 -> CSS代码
  • 🌷 -> JavaScript关键字
  • 🍁 -> JavaScript方法
  • ⭐ -> jQuery
  • 🌺 -> ajax
  • 🧸 -> node.js
  • 🌸 -> Vue.js
  • 🦌 -> Vue-router
  • ❌ -> Vuex
  • 🎀 -> axios
  • 🍚 -> Element-UI
  • 📱 -> Vant
  • 🕧 -> moment 时间框架-PC端
  • ⏰ -> dayjs 时间框架-移动端
  • 🔄 -> keep-alive Vue-缓存页面数据
  • 📦 -> Vue打包上线步骤
  • 📷 -> html2canvas Vue-页面截图转化为图片
  • 2️⃣ -> QRcodejs2 Vue-生成二维码
  • ➡️ -> nprogress Vue-页面top进度条插件
  • 💠 -> webpack

vue-helper插件     import导入路径的时候自己导入路径

Webpack-px2rem-plus-loader是一个用于将CSS的像素值转换为相对单位(如 rem)的loader,适用于Vue项目需要响应式设计的情况,它可以帮助你实现设计稿到代码的快速迁移。 要在Vue CLI的`vue.config.js`文件添加`webpack-px2rem-plus-loader`的配置,首先你需要安装这个插件和相关的依赖: ```bash npm install --save-dev px2rem-loader css-loader style-resources-loader vue-style-loader ``` 然后,在`vue.config.js`文件,找到并修改`configureWebpack`函数,通常是在`chainWebpack`方法里。添加新的规则配置如下: ```javascript module.exports = { configureWebpack: (config) => { config.module.rules.push({ test: /\.css$/i, use: [ 'style-loader', 'css-loader', // 加载 CSS { loader: 'px2rem-loader', options: { remUnit: 100 } }, // 转换像素为 rem ], include: /src/, // 只处理 src 目录下的 CSS 文件,可根据需要调整 }); if (!config.resolveLoader.hasPlugin('style-resources-loader')) { config.resolveLoader.rules.unshift({ test: /\.(scss|sass|less)$/, use: ['style-resources-loader', { resources: './path/to/your/global-styles.scss' }], }); } }, }; ``` 在这个配置,我们告诉Webpack先运行`style-loader`,然后是`css-loader`和`px2rem-loader`,最后处理`.css`、`.scss`、`.sass`或`.less`等样式文件。`px2rem-loader`选项里的`remUnit`参数决定了1rem代表的实际像素值。 别忘了替换`./path/to/your/global-styles.scss`为你实际存放全局样式的地方。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有两把刷子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值