Vscode插件

开发前景不晓得小伙伴们，平时开发或提醒的时候，有没有须要频繁输出 console.log(someThing) 的状况，该过程干燥且耗时 闲时花了一点工夫本人捣鼓了一个扩大，足以解决该问题，话不多说，在vscode扩大面板搜寻下述插件（h-nice-plugins） 感兴趣的小伙伴能够下载一下这个插件，应用成果如下述动图所示 Remark: 以后仅限在vscode下应用

本文内容借鉴于VS Code插件官网。 前言 一个杰出的开发工具能够显著进步开发人员的开发效率，而优良的扩大插件则能更进一步地晋升工具的效率。在前端开发畛域，VSCode毫无疑问是目前最受欢迎的开发工具。为了帮忙前端开发人员进步工作效率，明天小编将向大家举荐10个弱小的VSCode扩大插件。 1.JavaScript (ES6) Code Snippets JavaScript(ES6)代码片段插件能够帮忙开发人员节省时间：开发人员能够在一个中央获取所有的代码，而不须要反复的输出。除此之外，JavaScript(ES6)代码片段插件还能够查看TypeScript/TSLint 的代码。 导包补全代码： 触发条件触发内容imp→导入整个模块import fs from 'fs';imn→导入没有模块名称的整个模块import 'animate.css'imd→应用毁坏仅导入模块的一部分 import {rename} from 'fs';ime→从模块中导入所有内容作为别名import * as localAlias from 'fs';ima→仅导入模块的一部分作为别名import { rename as localRename } from 'fs';rqr→须要包require('');req→要求包常量const packageName = require('packageName');mde→默认模块.exportsmodule.exports = {};env→导出名称变量export const nameVariable = localVariable;enf→导出名称函数export const log = (parameter) => { console.log(parameter);};edf→导出默认函数export default function fileName (parameter){ console.log(parameter);};ecl→导出默认类export default class Calculator { };ece→通过扩大基类来导出默认类export default class Calculator extends BaseClass { };办法补全代码： 触发条件触发内容fof→for ... of 循环for(const item of object) {}fin→for ... 在循环中for(const item in object) {}anfn→创立一个匿名函数(params) => {}nfn→创立一个命名函数const add = (params) => {}dob→毁坏对象语法const {rename} = fsdar→毁坏数组语法const [first, second] = [1,2]sti→设置距离辅助办法setInterval(() => {});sto→设置超时辅助办法setTimeout(() => {});prom→创立一个新的 Promisereturn new Promise((resolve, reject) => {});thenc→将 then 和 catch 申明增加到 Promise.then((res) => {}).catch((err) => {});控制台补全代码： ...

前两天，看到了一则信息：新出的“自主研发”的 CEC-IDE，于是在好奇心的驱使下关上了官网。 主页：https://cecide.digitalgd.com.cn/monorepo/app-front/home 文档：https://cecide.digitalgd.com.cn/monorepo/app-front/developer 插件市场：https://cecide.digitalgd.com.cn/monorepo/app-front/superMarket ps：不过目前都曾经敞开了哈。 下载了 macOS 的 Apple Silicon 版本的压缩包，解压出应⽤并拖⼊“应⽤程序”⽂件夹。 然而，在 macOS 零碎中关上，居然发现它有“已损坏，⽆法关上”的问题。 联合我多年的应用 Mac 的教训，在终端执行如下命令： sudo xattr -r -d com.apple.quarantine /Applications/CEC-IDE.app于是就能失常启动了。 比照了我的VsCode，怎么说呢，不能说截然不同，几乎就是截然不同啊。 不过，这玩意怎么还要登录啊，于是我点击了【数广认证】，给我关上了数字广东的登录页面。 接着，我关上了 MarketPlace 看，它采⽤了⾃⼰的插件市场，⽽不是微软的。 尽管收录了不少第三⽅插件，放在“⼯具与效率”这⼀分类，但能够看到，数量上⽐微软的 VSCode（或者更 加开源的 VSCodium）的 MarketPlace 仍有不⼩的差距。 接下来，咱们比照下安装包的内容： 上：VSCodium，下：CEC-IDE 接下来，是【齐全兼容 VSCode 的插件】阐明： ⾄此能够得出结论：CEC-IDE 是⼀个在 VSCode 的开源代码（之所以不是 VSCodium 的开源代码是因为还 残存着微软的版权信息，⽽ VSCodium 的版权信息不是微软）的根底上粗制滥造的开发⼯具。其⽬标⽤户不仅不是中国边疆以外的开发者，甚⾄绝⼤少数不是边疆开发者。 然而，数字⼴东（数字⼴东⽹络建设有限公司）作为 CEC-IDE 软件的开发商，并不齐全遵循 MIT 开源协定 ，却 ⾃称“⾃主研发”。 同样骗经费的“红芯浏览器 ”好⽍晓得优化⼀下 UI 设计，⽐ Chromium 49 还难看，CEC-IDE 甚⾄只换了 个 logo，连⽪肤都懒得改，间接装都不装了。 更不⽤说这玩意⼉还有 VSCode/VSCodium 从不存在的充会员性能，是嫌捞钱不够间接么？ ...

在应用VSCode的插件进行less文件格式化的时候，发现会存在问题。 index.less @prefix: test;@{prefix}-input{ color :red; width : @base-with; height : @base-height;}@base-size : 10px;@base-with : @base-size + 2px;@base-height : @base-with + 3px;存在的问题合并+号和数组格式化后为: @prefix: test;@{prefix}-input { color: red; width: @base-with; height: @base-height;}@base-size : 10px;@base-with : @base-size +2px;@base-height : @base-with +3px;编译后为 尽管没有报错，然而不是你想要的后果,如果要对变量做运算的话，则会报错 @base-height : @base-with * 2; 波及的插件: @{prefix}和-两头会被插入空格格式化后为: @prefix: test;@{prefix} -input { color: red; width: @base-with; height: @base-height;}@base-size: 10px;@base-with: @base-size + 2px;@base-height: @base-with + 3px;编译后为: ...

1、Vue 2 Snippets这是一款基于vue2的代码片段提醒插件，对于应用vue2的开发者特地敌对，可大幅提高咱们的编码速度。 他的能力十分弱小，具体还须要咱们去看他的文档，解锁更多能力。 2、Path Autocomplete这是一款路劲提醒插件 vscode自带绝对路劲的提醒性能，然而不反对相对路劲和非凡配置门路（比方@标识）的提醒性能，这款插件就能帮忙咱们很好的解决这个问题。 须要留神的就是，如果须要反对非凡标识提醒性能，就须要在vscode的配置文件settings.json中减少一些配置。 比方须要反对@标识，则须要减少如下配置。 "path-autocomplete.pathMappings": { "@": "${folder}/src", } 其余具体性能可移步至插件文档 3、path prompt这是一款图片路劲预览插件。 须要留神的是，它同下面的Path Autocomplete插件，如果须要反对非凡标识（@等），也须要在settings.json减少配置。 4、 Svg Previewsvg文件预览插件 大家赶快用起来吧。 作者：京东物流 乌小龙 起源：京东云开发者社区

前端很多人用，然而每次文字和代码格式化改正时候忘了怎么开所以在这里进行一次整顿 设置办法第一步：关上设置 第二步：上方输入框输出 格式化 三个字而后设置以下三个选项 "editor.defaultFormatter" "editor.formatOnSave" "editor.formatOnType"

本文首发自「慕课网」，想理解更多IT干货内容，程序员圈内热闻，欢送关注！ 作者：维生素P|慕课网优质作者 工欲善其事必先利其器，进步程序员的开发效率必须要有一个好的开发工具。而一旦提到开发工具，那么就相对会提到火爆到被称为宇宙IDE的VS Code。 VS Code 在开发畛域十分风行，能够说是最受欢迎大家都喜爱用的软件。 如果你是刚学代码刚刚会写hello world的老手玩家，你能够很棘手的用它来写你的C语言数学题。如果你是业界大拿，纯Vim开发，也齐全反对。真正的用户，更多的是日常在开发的一般软件工程师，一样配合各种插件就能很不便的实现日常的工作。 VS Code 不仅仅是一个代码编辑器，它靠弱小的生态，能够满足你各种各样的需要。不论什么语言，只有装上插件就能有根底IDE的性能。不论什么程度，只有简略操作，就能齐全搭配好适宜本人的开发模式。 极度灵便的编辑器，如果你什么也不装，他就是个安安静静的小编辑器。如果你装上须要的差距，他就是个弱小的生产力机枪。 为什么大家都喜爱用呢？次要的起因是学习曲线十分敌对，新手上手应用极快。同时，借助开源，性能方面社区始终都有在跟进，再加上大量的插件形成的生态，组成了这样的极其灵便的IDE。 上手简略，按需拆卸，极度灵便，颜值高，性能好，这就是无敌的宇宙IDE---VS Code。 如果你还不晓得怎么用，得连忙往下看看学起来了！ 介绍目前软件开发行业的编辑器次要就是两种思路，一种是传统的IDE, Integrated Development Environment, 集成开发环境，除了根本的编辑性能，外面有你开发所须要的其余货色，语法高亮，implement跳转，版本控制等等，比方 Jetbrain 的 IDEA，Rider，PyCharm等等。 另一种则是轻量的思路，用编辑器+配置项来搭建开发环境。比如说 Emac，vim，Sublime Text，VS Code。 传统的IDE个别不须要太多入手的货色，很多配置项都在菜单里，动动鼠标就搞定了。而Emac, Vim, Sublime Text 又有一些太纯正，老手的上手学习老本会稍稍大一些，须要花一些工夫去学习和理解，通过一番折腾能力弄好一个比拟适宜本人的开发环境。 VS Code近年来能够算是爆炸式的增长，一方面是因为软件自身有微软的推广，另一方面也是得益于微软的利用市场拓展。海量的开发者给出了大量好用的拓展，使其变成了生态极好的一个编辑器，既能够纯正轻量化什么也不装当个编辑器，也能够通过拓展武装变成一个重度IDE。 这正是举荐VS Code的起因，也是他的长处。 VS Code的应用办法也很简略，下载安装，关上编辑器即可编辑任何文本内容，装置上各种拓展配置之后，就能极其棘手的编辑任何内容，所以也戏称为宇宙IDE。 VS Code 尽管也须要折腾一下，然而总体还是比 Vim 和 Emac 更加好上手的抉择，所以写一篇后端开发配置的分享实际指南，心愿能对各位后端开发的敌人们有所帮忙。 内容概述0 下载安装 1 Markdown 配置 2 C/C++ 配置 3 Python 配置 4 Shell脚本配置 5 Java 配置 下载安装牢记一句话，只有官网渠道才是正经渠道。 Windows下载任何软件，如果不想承当莫名其妙的危险，请善用英文和Bing搜寻，到官网下载正经的安装包，也能够去微软 Microsoft Store 下载。（前提是你C盘空间预设比拟大） Mac 优先找 App Store 或者命令行 homebrew ...

装置插件https://marketplace.visualstudio.com/items?itemName=ritwickde... 配置代理关上vscode设置页面，搜寻 Live Server 往下翻，找到 proxy设置，依照图中批改成本人的即可 配置实现，启动服务建设一个文件夹，应用vscode关上，而后启动服务vscode右下角有个图标，点击一下 点击Go Live 按钮，启动服务， 会主动关上一个页面 启动胜利效果图，我的端口是改过的：http://127.0.0.1:5555/

最近我在浏览 VSCode for web 的 repo，在最近更新的一些 commit 中发现了一个新的 VSCode 插件个性反对，名为 webOpener，它的作用是什么呢？又是如何影响插件加载的呢？在这一篇中咱们联合 VSCode For Web 的插件加载机制来详细分析一下。 VSCode for web 的插件加载机制咱们晓得，因为 VSCode for web 运行在浏览器上，因而，它的插件加载机制与 VSCode for desktop 有所不同。 在 VSCode for desktop 中，插件是以 vsix 包的模式存在的，因而，VSCode for desktop 能够间接通过 vsix 包的模式加载插件。而在 VSCode for web 中，因为浏览器的平安机制，不能间接加载 vsix 包。 因而，VSCode for web 采纳了一种非凡的插件加载机制。公布 VSCode for web 插件时，公布零碎会间接将我的项目编译，并公布到 CDN 节点上。当用户加载插件时，通过向该指标 url 发送申请，拉取远端（也能够是本地）的 extension.js 文件。并利用 web worker 加载机制，为每个插件调配独立线程加载与执行。 在生产环境中，对每个进入 VSCode 插件商店的插件，VSCode for web 会将反对 web 环境的插件的 package.json 与 extension.js 等文件打包成一个 zip 包，而后依据 publisher 调配适合的二级域名，通过 CDN 散发。 ...

开发你的第一个vscode插件先装置好Node.js和Git，而后装置Yeoman和VS Code Extension Generator： 装置脚手架npm install -g yo generator-code这个脚手架会生成一个能够立马开发的我的项目。运行生成器，而后填好下列字段： yo code# ? What type of extension do you want to create? New Extension (TypeScript)# ? What's the name of your extension? HelloWorld### Press <Enter> to choose default for all options below #### ? What's the identifier of your extension? helloworld# ? What's the description of your extension? LEAVE BLANK# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes# ? Setup linting using 'tslint'? Yes# ? Initialize a git repository? Yes# ? Which package manager to use? npmcode ./helloworld实现后进入 VS Code，按下F5，你会立刻看到一个插件发开主机窗口，其中就运行着插件。在命令面板(Ctrl+Shift+P)中输出Hello World命令。如果你看到了Hello World提醒弹窗，祝贺你胜利了！ ...

很多同学会有疑难，为什么我看到很多大牛的视频外面敲代码的时候，输出一个template，就会呈现一大块代码。 为什么我输出一个template，只有这一个单词，啥也没进去 别墨迹，快解决 闲话不多说，咱们就来聊一聊如何--懒省事（在VsCode外面设置自定义的模板） 首先：咱们要找到这个模板设置的入口 在文件 - > 首选项 - > 用户代码片段 选中当前，会呈现上面这个输入框，如果你想设置.vue文件的模板，能够新建一个vue.json全局代码片段文件，输出vue.json而后回车。 好了，接下来你能够把那些没必要的正文删掉，只须要在这个json文件外面输出以下内容 好吧，解释一下 这里的prefix是你在编辑器里输出的内容，就如同创立html文件的时候，输出的英文感叹号 body就是你回车当前呈现的内容 留神，这里的body是一个数组，每一行的内容都是数组里的每一项，并且须要用引号引起来。 是不是跟着敲好了？ 接下来，保留之后，就能够回到咱们的.vue文件外面尝试一下 当然如果你感觉这还不够，咱们仍旧能够在那个json文件外面持续输出 接下来你就能够输出”js”，就能呈现上面body外面的代码。 太棒了，咱们曾经晓得了如何创立一个小的片段 那么咱们为何不一步到位，间接创立一个残缺的vue文件模板呢？ 接下来善意的我吧代码贴出来，间接拿去用吧！！！ { "vue-template": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script>", "export default {", " data() {", " return {};", " },", "", " components: {},", "", " computed:{},", "", " mounted () {},", "", " methods: {},", "}", "</script>", "", "<style scoped lang='scss'>", "", "</style>", ]}} ...

基于一键Swagger类型转为typescript类型的版本升级，执行Javascript对象转为typescript类型申明。此次降级借助了@babel/types和@babel/genrator的性能，不得不说babel的能力十分的弱小 转换前 --- 转换后(效果图) 用法：（能够通过右击菜单点击、或者快捷键ctrl+shift+j） github地址PS: 又不满足的需要，或者有须要功能设计，都能够给我提issue

VSCode插件应用Code Runner报错：Code language not supported or defined. 解决办法： 找到Code-runner：Default language设置为javascript。 实现，即可应用！

vscode 插件开发当时阐明该插件提供以下能力 在编辑器中选中的内容下一行增加 console.log('content', content) 命令行操作: Insert Log快捷键: win: ctrl+w mac: cmd+shift+w删除以后文件中所有的console 命令行操作: Del all Logs快捷键: win: ctrl+r mac: cmd+shift+r删除以后文件所有正文 命令行操作: Remove all comments快捷键: win: ctrl+t mac: cmd+shift+t该文档记录一下 从插件代码初始化, 到插件工程目录阐明, 到package.json字段阐明, 到extension.ts文件阐明, 到性能实现, 到azure devops插件市场账号申请, 到插件公布的过程工程初始化// 当时全局装置yo(脚手架工具, 生成模板) generator-code(vscode拓展生成器, 配合yo应用构建我的项目)npm install yo generator-code -gyo code // 找个目录初始化我的项目 ? What type of extension do you want to create(您想要创立什么类型的扩大?)? New Extension (TavaScript)? What's the name of your extension(你的分机名是什么，也就是我的项目名)? auto-log? What's the identifier of your extension（你的扩大的标识符是什么）? auto-log? What's the description of your extension（什么是您的扩大的形容）? auto-log? Initialize a git repository（初始化一个git仓库）? Yes? bundel the source code with webpack (是否用webpack打包源码)？ No? Which package manager to use（应用哪个包管理器）? npm ...

欢送应用 2022 年 9 月版的 Visual Studio Code。其中一些次要亮点包含：工具栏自定义、更好的编辑器主动滚动、扩大视图更新、树形态视图中的搜寻后果、反对嵌套的 Git repo、终端疾速修复、Markdown 链接验证、GitHub Enterprise Server  认证等等。上面咱们一起具体理解一下吧！ 暗藏/显示工具栏操作您当初能够暗藏工具栏中的操作。右键单击工具栏中的任何操作并抉择其暗藏命令或任何切换命令。暗藏的动作被移到 ... More Actions 菜单，您能够从那里调用。如果想要复原菜单，能够右键单击工具栏按钮区域并抉择 Reset Menu 命令。如果想要复原所有菜单，请从命令面板运行 Reset All Menus (Ctrl+Shift+P)。 点我查看视频~ 更好的编辑器主动滚动抉择和拖动时，编辑器过来经常以取决于显示器的每秒帧数 (FPS) 的形式滚动，有时鼠标一达到编辑器边缘，编辑器就会疾速滚动。但当初当鼠标凑近边缘时，编辑器以更易于治理的速度主动滚动，而当鼠标远离编辑器时，速度会更快。 点我查看视频~ 扩大视图更新VS Code 当初在扩大视图的 Recently Updated 局部中显示过来 7 天更新的扩大。 新树形视图中的搜寻后果您当初能够在树中查看搜寻后果，只需单击搜寻视图右上角的列表/树形图标即可在列表和树形视图之间切换。 嵌套 Git 存储库反对为了解决长期存在的性能申请，咱们对存储库发现进行了更改，增加了对嵌套 Git 存储库的反对。依据嵌套存储库的地位，您可能须要批改 git.repositoryScanMaxDepth设置（默认为 1 级）。 终端疾速修复咱们开始推出一项由 shell 集成提供反对的新性能，称为疾速修复，此性能附带音频提醒反对。应用 audioCues.terminalQuickFix 启用它，以取得修复可用的声音批示。当命令映射到用户可能会采取的一组操作时，能够应用疾速修复。 以下是最后反对的疾速修复： Git 相似命令当 Git 命令输出谬误时，疾速修复会倡议相似的命令。 Git 设置上游当执行 git push 并且没有上游 remote 时，疾速修复会倡议应用上游 remote 参数进行推送。 Git 创立 PR当第一次将 branch 推送到 remote 时，疾速修复倡议关上链接以创立 PR。 固定罕用工作工作能够固定在 Tasks: Run Task 列表中，以便更快、更轻松地拜访。 Markdown 链接验证在应用 Markdown 时，很容易谬误地增加有效的文件链接或图片。兴许您遗记了文件名应用了 -（破折号）而不是 _（下划线），或者您链接到的文件可能被挪动到了别的目录。只有在查看 Markdown 预览或公布后才发现这些谬误。VS Code 的新 Markdown 链接验证能够帮忙捕获这些谬误，设置 "markdown.validate.enabled": true，有效链接将报告为正告或谬误。 ...

应用 or 逻辑，能够用 , 英文的逗号来分隔 如图所示，就能同时排除 py 后缀的文件和 rst 后缀的文件了

想法想找一个番茄时钟的vscode插件来劳逸结合，有法则摸鱼，翻了很多vscode 插件都不太称心，罗唆本人撸了一个。 个性遵循番茄时钟的工作形式--每1个番茄时钟有一个短休息时间，4个番茄时钟后有一个长劳动时钟(反对自定义)操作接触简略 -- 开始、暂停、重启、重置都能够通过点击状态栏的图标来操作有一个简略的统计性能，能够统计明天的番茄时钟数工夫到了有告诉提醒，并且有快捷操作按钮有切换正反计时的性能，能够用来做倒计时,也能够用来做正计时实现明确需要番茄时钟的工作形式 -- 每1个番茄时钟有一个短休息时间，4个番茄时钟后有一个长劳动时钟(反对能自定义)提供操作 -- 开始、暂停、重启、重置联合vscode Api 提供状态栏图标显示\命令行\告诉\配置等思路形象先形象实现番茄时钟的性能相干类而后联合vscode api实现 计时器Timer类 -- 提供时钟性能，每interval 执行一次tick操作，调用callbackPomodoro类 -- 记录番茄时钟的type(劳动还是工作)，状态(running、pause、done等)，还有绑定的timerPomodoroManager类 -- Timer和Pomodoro都是和平台无关也就是没有vscode相干的api，能够迁徙到其余平台，PomodoroManager的话负责绑定Pomodoro与调用vscode api -- 绘制状态栏图标、告诉、绑定命令等其余 -- 在activate函数注册命令与package.json中配置的命令等，这些都是vscode约定的形式细节vscode 插件的开发能够看看官网文档，根本看完hello world与几个demo之后就能够动手了，插件所有的性能都是通过事件订阅机制实现的，而且vscode api 对象、事件划分很明确，上手不难 Your First Extensionvscode插件demo合集次要说下番茄时钟实现的细节：为了在状态栏提供实时的时钟更新与hover上的tootip操作按钮费了一点功夫。参考vscode debug时候的状态：提供开始，暂停，复原，重启，敞开等操作，如图： 实现如图成果： 为了实现tooltip能够操作，tooltip要是MarkdownString 类型，而且必须是a标签绑定command，能力触发操作。局部代码如下： this._commandMap = { start: { link: Uri.parse( `command:pomodoroClock.startPomodoro` ), imgSrc: Uri.joinPath(this.vscodeContext.extensionUri, 'assets/imgs', 'start.svg') }}const btns = [];if (this.currentPomodoro.status === PomodoroStatus.None || this.currentPomodoro.status === PomodoroStatus.Done) { btns.push(`<a href="${this._commandMap.start.link}"><img src="${this._commandMap.start.imgSrc}" /></a>`);}let currentTime = this.currentPomodoro.showTimelet timerPart = this.getShowClock(currentTime)this._clockBarText.text = `$(clock) ${timerPart}`;const contents = new MarkdownString(btns.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'), true);contents.isTrusted = true;contents.supportHtml = true;this._clockBarText.tooltip = contents;插件其余截图 ...

本文已收录编程学习笔记。涵盖PHP、JavaScript、Linux、Golang、MySQL、Redis和开源工具等等相干内容。作为开发人员，咱们一天中的大部分工夫都在电脑屏幕前编写代码。 眼睛疲劳（也称为 Asthenopia）可能是一个重大的问题，并且在默认的 VSCode 设置中破费数小时可能很迷人。尽管开箱即用的 VSCode 设置无论如何都不错，但如果您花一些工夫配置设置（不仅是字体，还有主题），这样不仅好看而且对爱护眼睛也有很大好处。 在本文中，我将分享您能够专门用于编码的最佳字体。尽管是主观的，但我曾经列出了将易读性作为高优先级的收费和付费字体列表（字体看起来也很漂亮的加分）。 1：MonoLisa - 字体追随性能 MonoLisa 采纳了一些独特的技术，可进步易读性，并使其在较长时间内观看时视觉上令人愉悦。 这是我集体最喜爱用于编程的字体。我在 2020 年初发现了这种字体，并在购买许可证之前在 CodePen 上应用了一段时间，这样我就能够在 VSCode 本地以及我的集体网站上应用它。贵吗？是的。但我置信这种字体的细微差别会让观看体验大大改善。 官网地址：https://www.monolisa.dev/ 2：JetBrains Mono - 开发人员的字体 JetBrains 为开发人员提供了一整套代码编辑器，他们也有本人的等宽字体。JetBrains Mono 因其减少的高度和特定于代码的连字而在许多其余字体中怀才不遇。在我购买 MonoLisa 之前，我应用的是 JetBrains Mono。它简略而漂亮。并且收费！ 官网地址：https://www.jetbrains.com/lp/... 3：Fira Code - 带有编程连字的收费等宽字体 Fira Coda 是许多开发人员必定会喜爱的经典字体，它是 Nikita Prokopov 的收费字体。Fira Code 与 ASCII 兼容，并带有许多连字，使代码更易于浏览。 官网地址：https://github.com/tonsky/Fir... 4：source-code-pro - 开源专业版 Source Code Pro 是 Adobe 于 2012 年公布的开源字体，在 GitHub 上领有超过 17k 颗星。它在开发者社区变得十分风行，能够收费下载！ 官网地址：https://github.com/adobe-font... ...

https://github.com/vitejs/vit... vite3目前是esm,vscode须要纯cjs，有啥取巧的办法能够在vscode插件外面应用vite？

问题import { useTeamStore } from "/@/store/modules/team";如上，vscode中应用/@/门路的文件无奈应用ctrl+左键跳转到对应文件 剖析网上找到的解决方案都在说jsconfig.json文件配置，但我的我的项目tsconfig配置是正确的，剖析发现ts文件里能够失常跳转，vue文件不行，狐疑是应用的volar扩大的问题，最初找到了volar的issue vscode 下局部文件中的函数无奈ctrl+左键跳转，笔者应用的volar版本v0.38.8有问题 解决方案装置更低版本的volar，笔者改为了v0.37.0版本 间接在vscode中抉择装置另一个版本可能长时间没有反馈，能够抉择去 vscode市场 下载 VSIX文件，而后从VSIX装置 v0.37.0版本下载地址

配置 VScode一、前言上周六因为电脑系统升级，把我的 vscode 配置全删了（哭了），又要重新配置，有些中央忘了，花了一点工夫，所以罗唆整顿出一份文档，下次配置时依照这份文档来配置就好了。 二、运行 PHP装置 PHP Intelephense 插件；装置 code run 插件。（在装置实现并配置好环境变量后，遗记重启 vscode，导致控制台输入始终显示乱码，参考：在vscode运行PHP，应用code run 插件，应用及问题解决 ）三、open php in browser 插件配置插件配置 设置Open-PHP-HTML-JS-in-browser: Custom Url To Open的值为http://localhost:端口/${relativeFile}设置Open-PHP-HTML-JS-in-browser: Document Root Folder的值为你网站域名的根目录，例如:C:\xampp\htdocs\抉择Open-PHP-HTML-JS-in-browser: Url To Open的custom我的 vscode 的设置为： Custom Url To Open：http://localhost/${fileBasename}；Document Root Folder：D:\PhpStudy\PHPTutorial\WWW；四、配置 Markdown参考：应用VS Code插件打造完满的MarkDown编辑器（插件装置、插件配置、markdown语法） 五、配置快捷键参考：【VScode】vscode设置快捷键管制光标挪动（代替上下左右） 关上快捷键设置的 json 文件 快捷键设置： // 将键绑定放在此文件中以笼罩默认值[ { "key":"ctrl+l", "command":"cursorRight", "when": "textInputFocus" }, { "key":"ctrl+j", "command":"cursorLeft", "when": "textInputFocus" }, { "key":"ctrl+i", "command":"cursorUp", "when": "textInputFocus" }, { "key":"ctrl+k", "command":"cursorDown", "when": "textInputFocus" }, { "key":"ctrl+alt+l", "command":"cursorRightSelect", "when": "textInputFocus" }, { "key":"ctrl+alt+j", "command":"cursorLeftSelect", "when": "textInputFocus" },]参考资料在vscode运行PHP，应用code run 插件，应用及问题解决应用VS Code插件打造完满的MarkDown编辑器（插件装置、插件配置、markdown语法）vscode设置在php在浏览器关上vscode 如何通过快捷键操作光标【VScode】vscode设置快捷键管制光标挪动（代替上下左右）VSCode 设置快捷键 实用配置

前言上次 (opens new window)咱们解释了 vscode 这种大型项目设计依赖注入治理海量的模块有什么益处。也提到了 DI 必须有这样一种机制： 1、模块与模块之间的无源码依赖（这里的模块次要指类） 2、只依赖接口/形象，不依赖具体实现 3、模块的创立，循环援用、谬误等能够主动被捕捉到那么这样的一种机制如何实现呢？ 咱们先展现一下 vscode 源码的经典片段 // mian.ts//独立的 app 初始化阶段的文件中let collection = new ServiceCollection();let service = new InstantiationService(collection);collection.set(IService1, new Service1());// IService1.ts// 独立的接口文件let IService1 = createDecorator<IService1>("service1");interface IService1 { readonly _serviceBrand: undefined; c: number;}// Service1.ts// Service1 是对 IService1 接口的具体实现class Service1 implements IService1 { declare readonly _serviceBrand: undefined; c = 1;}// Service1Consumer.ts// 依赖 IService1 接口的模块class Service1Consumer { constructor(@IService1 service1: IService1) { assert.ok(service1); assert.equal(service1.c, 1); }}装璜器从下面咱们能够看到 Service1Consumer 模块 对 IService1 接口有依赖，通过 @IService1[第一个] 装璜器润饰 service1 ，参数类型也叫 IService1[第二个]。这里的两个 IService1 是同名，但性能不一样的标识，能够设想为函数重载（实际上一个是函数，一个是接口）。为什么要把装璜器和接口名定义成一样的，这里是 vscode 的特地设计，上面再讲。 ...

问题背景公司我的项目采纳的是prettier eslint插件来进行格式化，始终以来都用的好好的， 最近忽然就狗带了，原本还狐疑是我的设置问题，各种百度谷歌，起初发现不是 在官网的issue外面发现了答案！！！官网issue地址 问题起因：eslint 8降级了一些api，导致不兼容，而后以后这个插件也即时做了解决，只不过他们把最新版本的代码给当作主版本了，像咱们这种eslint 8以下的我的项目，须要降级prettier eslint 版本就好了剖析报错信息，报错信息r is not a constructor 解决办法：vscode 把插件版本回退1. vscode插件栏，点击prettier eslint 插件的的小按钮 2. 抉择装置历史版本 3. 装置3.1.0 版本， 而后重启vscode 4. 而后再回到之前搞乱的文件，执行prettier eslint 格式化， 完满，收摊！！

vscode曾经集成了许多辅助开发插件的性能 括号色彩原插件Bracket Pair Colorizer现通过editor.bracketPairColorization设置 主动重命名标签原插件Auto Rename Tag现通过editor.Linked Editing设置

问题1： GitHub Copilot could not connect to server. Extension activation failed: "connect ECONNREFUSED 127.0.0.1:443"解决形式：dns中增加8.8.8.8，而后重启vscode，再不行重启电脑。 问题2： GitHub Copilot could not connect to server. Extension activation failed: "Failed to get copilot token"解决形式：在vscode中登记，重启vscode，会提醒登录，依据提醒登录即可。

{ // 头部正文 "fileheader.customMade": { "Author": "XXX", // 创立文件的作者 "Date": "Do not edit", // 文件创建工夫(不变) "LastEditors": "XXX", // 文件最初编辑者 // 因为编辑文件就会变更最初编辑工夫，多人合作中合并的时候会导致merge // 能够将工夫颗粒度改为周、或者月，这样抵触就缩小很多。搜寻变更工夫格局: dateFormat "LastEditTime": "Do not edit", // 文件最初编辑工夫 // 输入相对路径，相似: /文件夹名称/src/index.js "FilePath": "Do not edit", // 文件在我的项目中的相对路径 自动更新 // 插件会主动将光标挪动到Description选项中 不便输出 Description字段能够在specialOptions更改 "Description": "" // 介绍文件的作用、文件的入参、出参。 // custom_string_obkoro1~custom_string_obkoro100都能够输入自定义信息 // 能够设置多条自定义信息 设置共性签名、留下QQ、微信联系方式、输出空行等 // "custom_string_obkoro1": "" }, // 函数正文 "fileheader.cursorMode": { "description": "", // 函数正文生成之后，光标挪动到这里 "param": "", // param 开启函数参数主动提取 须要将光标放在函数行或者函数上方的空白行 "return": "", }}

{ "workbench.iconTheme": "vscode-icons", "px2rem.rootFontSize": 192, "workbench.colorTheme": "One Dark Pro Darker", "explorer.confirmDelete": false, "editor.maxTokenizationLineLength": 9999999999999999999999999999999, "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //每次保留⾃动格式化 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后⾯的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器⾃带的ts格局进⾏格式化 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" //属性强制折⾏对齐 } }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ] }vscode插件 ESLint , JavaScript Debugger

前言VSCode作为目前应用人数最多的IDE，在前端开发者中也是非常受欢迎的。它收费、开源、还具备许多弱小的性能，例如智能提醒、插件商店、集成Git等等，但除此之外还有一个被许多开发者疏忽的性能——运行和调试（Run and Debug）。你可能会说，要什么Debug，我console.log一把梭走天下。没错，这也是目前很多人在应用的调试办法。然而既然VS Code具备这样的性能，试一试，或者会有新的播种呢~简介VS Code的要害个性之一就是它具备弱小的调试（debug）性能，内置的调试器（debugger）能够帮忙开发者疾速的编辑、编译和调试。VS Code内置的调试器反对Node.js运行时，并且可能调试JavaScript、TypeScript、以及任意其余可能编译成JavaScript的语言。如果想要调试其余的语言和运行时，包含但不限于PHP、Ruby、Go、C#等等，能够在扩大商店中寻找相干的Debugger扩大并且装置它，这里咱们就不过多的叙述了。简略调试为了不便咱们了解罕用性能，间接进行调试来学习相干性能更容易上手。这里咱们用一个简略的Node.js我的项目作为例子进行调试。首先筹备一个app.js:let msg = 'Hello world';console.log(msg);let numA = 6;let numB = 13;let num = numA + numB;console.log(num);复制代码这样咱们就有一个简略的Node.js程序了。接下来咱们点击左侧菜单中的运行与调试图标（图标是一个虫子+开始，顾名思义debug&run），这里就是初始化的面板；而后咱们在代码中须要打断点的中央加上断点：间接点击运行和调试：程序跑起来了，并在断点处也停下来了。调试面板也被激活，显示了变量、监控、调用堆栈、断点的面板。点击上方调试操作栏的第一个图标（持续，快捷键是F5），程序会走到下一个断点，并且变量面板中的msg变量会进行更新：持续点持续，直到跳出最初一个断点，咱们的调试步骤就完结了。这就是一个最简略的Node.js程序的调试过程。当然咱们理论开发中必定不会有这么简略的程序，所以接下来咱们来具体介绍下调试中的相干性能。性能介绍 尽管下面的例子是Node.js我的项目，然而对于其余的调试器，大部分的概念和个性也都是通用的。 运行面板和菜单在下面的例子里咱们曾经看到过运行面板了。点击左侧的“运行和调试”图标即可关上面板。运行面板显示了所有对于运行和调试的相干信息。如果还没有配置launch.json，那么VS Code就会显示初始状态的面板。例子中咱们就没有进行配置，所以显示就是初始状态：除了左侧的图标，也能够应用顶部的顶级菜单 运行（Run)。这里的命令根本和面板中的统一：想不起快捷键的时候也能够在这里看看~启动配置下面的例子中咱们抉择了“运行和调试”，VS Code间接应用了内置的Node.js调试配置启动了调试步骤。然而大部分场景中，咱们不会有这么简略的调试。此时创立一个自定义的launch配置文件就非常有必要了，咱们能够在配置文件中保留一些调试的细节。VS Code把调试配置信息保留在.vscode目录下的launch.json文件中（.vscode目录个别存在于我的项目的根目录下）。要创立一个launch.json文件，在运行初始化面板中点击“创立一个launch.json”：VS Code会去尝试自动检测以后调试环境。如果它失败了，咱们就须要本人手动抉择：抉择Node.js后，VS Code会主动生成配置文件以及.vscode目录。这里是Node.js默认的launch.json:{ // 应用 IntelliSense 理解相干属性。 // 悬停以查看现有属性的形容。// 欲了解更多信息，请拜访: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [ { "type": "pwa-node", "request": "launch", "name": "Launch Program", "skipFiles": [ "<node_internals>/**" ], "program": "${workspaceFolder}/app.js" }]}复制代码这里须要留神的是，对于不同类型的调试器，launch配置中的属性可能都是各不相同的。能够应用VS Code内置的智能提醒（IntelliSense）性能去查看有哪些属性可用，hover属性就能够看到帮忙信息。 不要想当然地认为某个调试器中存在的属性放到其余的调试器下中也能起作用。调试前要确保所有配置都是有意义的。 launch和attach在VS Code中，有两种外围的调试模式，Launch和Attach，他们为开发者提供两种不同类型的工作流。最简略的形式来了解这两种工作流： launch配置能够了解为VS Code启动调试程序的说明书；attach配置则是如何将VS Code的调试器连贯到已运行的应用程序或过程的办法； VS Code的调试反对用调试模式启动一个程序，或者用调试模式附加到一个曾经在运行中的程序。应用哪种调试配置，取决于咱们的调试需要。

近日，Visual Studio Code 公布了四月更新（1.67 版本），此次更新亮点包含： 资源管理器文件嵌套 - 在资源管理器中的源文件下嵌套生成的文件「设置」的编辑器过滤器 - 过滤器按钮会显示@Modified设置等搜寻括号对着色 - 对着色性能当初默认处于启用状态切换嵌套提醒 - 应用 Ctrl+Alt 可在编辑器中疾速暗藏或显示嵌套提醒拖放以创立 Markdown 链接 - 将文件拖入编辑器中以创立 Markdown 链接查找 Markdown 中所有援用 - 疾速查找对 header、文件、URL 的所有援用Java 扩大更新 - 当初反对嵌套提醒和 lazy 变量解析扩大作者的 UX 指南 - VS Code 扩大的 UI 最佳实际指南新的 Rust 语言指南 - 理解如何在 VS Code 中应用 Rust 编程语言资源管理器文件嵌套资源管理器当初反对依据文件的名称嵌套相干文件。有几种设置可用于管制此行为： explorer.fileNesting.enabled\- 管制是否启用文件嵌套。它能够全局设置，也能够针对特定工作区设置explorer.fileNesting.expand\- 管制嵌套的文件是否被默认开展explorer.fileNesting.patterns\- 管制文件的嵌套形式。默认配置为 TypeScript 和 JavaScript 我的项目提供智能嵌套 「设置」的编辑器过滤器「设置」的编辑器搜寻控件当初在右侧有一个漏斗状按钮。单击该按钮将显示一个过滤器列表，您能够将其利用于搜寻查问以过滤后果。 括号对着色 鉴于 1.60 版本中引入的新括号对着色性能取得了许多正向反馈，此版本默认启用了括号对着色性能。 能够通过设置为 "editor.bracketPairColorization.enabled"false禁用括号对着色性能。 切换嵌套提醒嵌套提醒能够在源代码中显示其余信息。 应用办法： on - 启用嵌套提醒 off - 禁用嵌套onUnlessPressed - 用 Ctrl+Alt 显示和暗藏嵌套提醒offUnlessPressed - 用 Ctrl+Alt 暗藏和显示嵌套提醒拖放以创立 Markdown 链接当初，您能够通过将文件从 VS Code 的资源管理器中拖放到 Markdown 编辑器，以疾速创立 Markdown 链接。 ...

下图可看到，i18n-ally提醒页面找不到门路，但下方翻译胜利的后面多加了一个文件名user.user,导致vscode无奈查看翻译 解决办法： // settings.json// i18n-ally.namespace敞开即可{ "i18n-ally.localesPaths": [ "src/locales/lang" ], "i18n-ally.enabledParsers": ["js","json"], "i18n-ally.keystyle": "nested", "i18n-ally.sortKeys": true, "i18n-ally.namespace": false, "i18n-ally.sourceLanguage": "en-US", "i18n-ally.displayLanguage": "zh-CN", "i18n-ally.enabledFrameworks": ["vue", "react"]}胜利后的成果：

To enable project-wide JavaScript/TypeScript language features, exclude large folders with source files that you do not work on... 形式1：试试批改jsconfig的node_modules的配置 "exclude": ["*/node_modules/"] 参考起源：https://github.com/microsoft/...形式2：装置jshint。ps:可能有eslint的配置问题，所以此法作废

WEB前端工具vscode中Tasks及Emmet的利用 vscode的Tasks 的利用为什么要用tasks?当咱们须要运行命令的时候，须要调出命令行工具，而后再执行某个命令操作。然而有了tasks之后，咱们能够间接在编辑器中运行。vscode 能自动检测出 npm scripts，并把这些命令当成 task。前端培训接下来，咱们能够通过 task 来执行某个 npm 脚本了。相似如下代码： “scripts”: { “dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”, “start”: “npm run dev”, “unit”: “cross-env BABEL_ENV=test karma start test/unit/karma.conf.js –single-run”, “e2e”: “node test/e2e/runner.js”, “test”: “npm run unit && npm run e2e”, “build”: “node build/build.js” },启用tasks工作步骤如下：1、mac上面输出 cmd p ，window上面输出 ctrl p2、输出 task（task 后有空格）3、抉择命令运行npm:dev4、抉择持续而不扫描工作输入等如果你须要订制本人的 task ，能够参考文档。不过，本人定义的 task 只是在本我的项目中应用。对于前端开发者来说，常常应用的命令能够增加到 package.json 中。所以这里咱们只是把 Tasks 当作疾速启动命令的工具。vscode中应用Emmet对于Emmet，咱们曾经很相熟了，vscode中内置的，这里就不多论述了上面说一下如何疾速生成vue模板页配置，步骤如下：关上 vsocde 的 首选项 > 用户代码片段 ，输出vue，抉择代码片段文件为 vue.json。输出以下内容。 “Vue component”: { “prefix”: “vuec”, “body”: [ “<template>”, “\t$1”, “</template>”, “<script>”, “export default {“, “\t”, “}”, “</script>”, “<style rel=\”stylesheet/scss\” lang=\”scss\” scoped>”, “</style>”, “” ]}

1、需要我想在VS Code中创立文件的时候生成一些阐明。 2、插件插件蛮多的，我用的是korofileheader 3、配置1）找到配置文件 2）配置文件 "fileheader.customMade": { "Author": "ArdenZhao", "Date": "Do not edit", // 文件创建工夫(不变) "LastEditors": "Do not edit", "LastEditTime": "Do not edit", // 文件最初编辑工夫 "FilePath": "Do not edit", // 文件在我的项目中的相对路径 自动更新}, // 头部正文3）最初，新建文件生成的成果 https://github.com/OBKoro1/ko...

依据网上针对vscode的解法，obsidian的解法如下 前置条件装置obsidian开启vim插件操作如下在命令行执行如下命令 defaults write md.obsidian ApplePressAndHoldEnabled -bool false重启obsidian。而后就能够体验与linux统一的vim体验了。

1.解决vscode无ts类型提醒的问题前些日子在学TS，看到视频里的老师用的vscode，将鼠标移到变量或函数名上的时候，竟然能够显示类型提醒（也就是any/string/number这些），我大吃一惊。为什么我的vscode没有？是装置了什么插件吗？到处问，到处查，扭转vscode设置，钻研几天后，我才发现，原来这是它自带的，只不过我之前迷迷糊糊地可能改了配置了。其实，只有复原默认设置即可，具体做法如下：删除c盘的administrator里的.vscode文件夹，和appData文件夹里的code文件夹（Roaming）。 2.vscode热门扩大举荐vscode最大的长处就是能够很不便地增加扩大，不必翻墙，也不必去满是流氓软件包的下载网站里找。关上扩大一栏，一搜一装置，搞定。以下扩大依照顺序排列，前期遇到好用的会不断更新： 别名门路跳转，vue我的项目中哪怕是‘@/’结尾的门路，点击Ctrl + 左键都能够跳转bracket pair colorizer, 高亮分色彩辨别不同层级的小括号花括号Chinese (Simplified) (简体中文) ，中文包必定是必备，看着亲切gitlens，可在编辑器页面显示git更新工夫Highlight Matching Tag，高亮显示鼠标所在标签的开始和结尾indent-rainbow，让缩进更直观postcode, 相当于postman插件版Vetur，开发Vue2我的项目必备vscode-icons, 文件目录图标加强vue-component，可疾速显示组件对应的必备属性Vue Language Features (Volar)，开发Vue3必备，不过目前和Vetur互相制约，两者在应用的时候记得禁用另一个

写个vscode插件, 帮忙浏览i18n我的项目的代码 介绍 作者以后参加的我的项目是面向寰球用户的, 我的项目免不了要做国际化解决, 哪怕只是一个简略的ok按钮的ok文案都要翻译成不同国家的语言展现, 所以在代码外面往往咱们不能够间接命名为ok, 而是可能命名为user_base_plan_edit_ok_button这类的名字, 并且为了辨别i18n与其它命名, 咱们团队会采纳全大写的形式相似USER_BASE_PLAN_EDIT_OK_BUTTON, 而这样的代码多了之后浏览起来会让眼睛干涩, 相似上面图里的伪代码: 为了解决这个不好浏览的问题我比拟预期的成果是, 当鼠标悬浮在指标文字身上时会浮现出一个弹框, 而这个弹框至多要通知我这个词语的中文或英文意思, 成果如下: 能够看出这个插件如果做好了不肯定只能用在i18n这个只是点上, 能够用在很多方面, 比方某个code103993283这个code具体代表什么含意能够做个插件展现进去。 一: 初始化vscode我的项目 没做过vscode插件的同学举荐先读读我写的入门教程: 记一次前端"vscode插件编写实战"超具体的分享会(倡议珍藏哦)(上篇)记一次前端"vscode插件编写实战"超具体的分享会(倡议珍藏哦)(下篇) 这次做的插件是针对我以后工程的, 没有广泛应用能力所以就没公布到vscode官网, 开发好后打包发到公司内网与群里就ok了。 创立我的项目: 这里我的项目名暂定叫i18n2c yo code 二: 初始化架构 extension.js文件咱们清理洁净: const vscode = require("vscode");function activate(context) { vscode.window.showInformationMessage("i18n翻译插件加载实现");}module.exports = { activate,}; 批改package.json文件: 设置当资源加载完就开始加载咱们的插件 {// ... "activationEvents": [ "onStartupFinished" ],// ...} 点击f5开启调试模式, 呈现下图就证实插件能够失常启动了: 三: 初始化hover文件 咱们把hover后的逻辑都放在src外面: 简略革新一下extension.js, 把hover办法加进去: const vscode = require("vscode");const hover = require("./src/hover");function activate(context) { vscode.window.showInformationMessage("i18n翻译插件加载实现"); context.subscriptions.push(hover);}module.exports = { activate,}; hover.js 导出悬停时的解决办法 ...

{ // 主动换行 "editor.wordWrap": "on", // vscode默认启用了依据文件类型主动设置tabsize的选项 "editor.detectIndentation": false, // 从新设定tabsize "editor.tabSize": 2, // #每次保留的时候主动格式化 "editor.formatOnSave": true, // #让函数(名)和前面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户本身习惯抉择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按编辑器自带的ts格局进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // 增加emmet反对vue文件 "emmet.includeLanguages": { "wxml": "html", "vue": "html" }, // 给js-beautify-html设置属性隔断 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto", "wrap_line_length": 200, "end_with_newline": false }, "prettyhtml": { "printWidth": 200, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false }, "prettier": { "semi": false, "singleQuote": true } }, // style默认偏移一个indent "vetur.format.styleInitialIndent": true, // 定义匿名函数的函数关键字前面的空格解决。 "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, // 定义函数参数括号前的空格解决形式。 "typescript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.ignoreProjectWarning": true, "explorer.confirmDelete": false, "editor.fontLigatures": null, "editor.showFoldingControls": "always" }

{    "workbench.iconTheme": "material-icon-theme",    "editor.fontSize": 18,    "workbench.startupEditor": "none",    "vetur.validation.template": true,    "editor.tabSize": 2,    "eslint.validate": [        "javascript",        "javascriptreact",        "html",        "vue",    ],    "eslint.alwaysShowStatus": true,    "editor.formatOnSave": true,    "files.autoSave": "onFocusChange",    "eslint.format.enable": true,    "[vue]": {        "editor.defaultFormatter": "dbaeumer.vscode-eslint"    },    "[javascript]": {        "editor.defaultFormatter": "dbaeumer.vscode-eslint"    },    // "files.eol": "\n"}

插件Project ManagerVS Code CounterGit GraphAuto ImportGit HistoryEslint

首先间接放解决办法在 vsCode settings.json 中增加 { // 缩进大小,自行按需配置 "vetur.format.options.tabSize": 4, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // "wrap_attributes": "force-expand-multiline", "wrap_line_length": 120, "wrap_attributes": "auto", "end_with_newline": false, // "indent_head_inner_html": true, // 去掉了 col "void_elements": ["area", "base", "br", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"], }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false } },}次要失效属性为 void_elements 成果是标识了所有无子标签的标签在其默认值的状态下删除了标签 col 再次排版即可解决 ...

1. 装置vsCode下载地址 ：https://code.visualstudio.com/装置实现后 启动 vsCode , 此处省略 一万字 .... 2. 唤出vsCode控制台Windows 快捷键 : Ctrl + Shift + P macOS 快捷键 : command + Shift + P 3.输出“snippets”并抉择 4. 如下有许多代码片段 进行自定义编写 5. 咱们以 vue 文件 进行演示 （ 输出vue ） 抉择 vue.json 6. vsCode 主动 生成 vue.json 文件 如下 7. 将 vue.json 文件 改为如下配置（ 可依据集体需要进行批改模板内容 ）{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script>", "export default {", " components: {},", " props: {},", " data() {", " return {", " };", " },", " watch: {},", " computed: {},", " methods: {},", " created() {},", " mounted() {}", "};", "</script>", "<style lang=\"scss\" scoped>", "</style>" ], "description": "A vue file template" }}8. 在我的项目中 新建一个vue 文件 输出 “ vue ” 按下回车键或者Tab键，模板就主动生成了 ...