都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还丝滑的强大功能所折服。 我是来给大家安利插件的,想做个比较全面的插件集合给大家。...2.Quokka Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。...filesize显示效果 18.GitLens 能显示每一行代码的作者以及提交时间。 ? 19.Git history Git 历史 ?...35.Project Manager 项目管理工具 这两种方式对于需要经常切换项目时,比较耗时 为解决这个问题,vscode提供了Project Manager插件管理,开发时常用的项目 (1)command...,点击进去就可以切换项目了。
Auto Rename Tag 前端神器,自动修改标签名,当我们修改一个标签时,自动修改对应的右侧标签。...vscode-icons 给你的 vscode 中文件夹、文件换上更好看的图标。...的文件夹名 ${env:PATH}:系统中的环境变量 VSCode调试配置项说明 request:请求配置类型,可以为launch(启动)或attach(附加) 下面是launch 和 attach 类型共有的属性...可能是您node_modules从VS Code的内置搜索中排除了该文件夹,这意味着如果您想在其中打开和/或编辑文件node_modules,则必须手动找到它,当node_modules文件夹很大时,这可能会很烦人...(文件夹名称)—>选择要打开的文件或文件夹 Turbo Console Log 对 console.log 插入,注释,删除 搜索安装Turbo Console Log 插入有意义的日志消息 选择作为调试主题的变量
因此,如果你正在使用 VSCode,这里有一个扩展列表,你必须提高你的工作效率。 1. Git Lens https://marketplace.visualstudio.com/items?...当我们使用 TypeScript 时,这个扩展就派上用场了。它通过一个名为 “灯泡” 的功能对你的导入文件进行分类和组织,并修复编码错误。 4....itemName=esbenp.prettier-vscode Prettier 是一种固执的代码格式,它使开发人员在代码格式方面的工作变得更容易。...itemName=MS-vsliveshare.vsliveshare 当您与您的团队成员一起解决问题,并希望在编辑器上共同处理相同的代码时,这将帮助您将代码编辑器的控制权交给您的团队成员,您可以同时处理它...itemName=johnpapa.vscode-peacock 当你在多个工作空间上工作时,这个扩展可以帮助你识别你已经切换到或工作的确切的工作空间。 13.
这两种能力几乎涵盖了绝大部分代码规范,并且具体规范是可配置的,团队可以定制自己喜欢的代码风格。 定制规范后,项目运行或热更新时,ESLint 就会自动检查代码是否符合规范。...不同点:ESLint 会在检查时对不规范的代码提示错误;而 Prettier 会直接按照规范格式化代码。 所以,ESLint 和 Prettier 定义的规范要一致,不能冲突。...它就是我们的第三招神技 —— VSCode 强大的插件 VSCode 对我们前端来说都不陌生,是我们日日相伴的开发武器。当前 VSCode 几乎统一了前端圈的编辑器,功能强大,倍受好评。...因为我们上面配置了默认格式化程序为 Prettier,现在又配了保存时格式化,相当于将文件保存和 prettier 命令连接了起来。...文件夹下组件命名:中划线 user-id 组件导出命名:大驼峰 UserId 项目结构规范 项目结构规范主要是指 src 文件夹下的结构组织。
这两种能力几乎涵盖了绝大部分代码规范,并且具体规范是可配置的,团队可以定制自己喜欢的代码风格。 定制规范后,项目运行或热更新时,ESLint 就会自动检查代码是否符合规范。...不同点:ESLint 会在检查时对不规范的代码提示错误;而 Prettier 会直接按照规范格式化代码。 所以,ESLint 和 Prettier 定义的规范要一致,不能冲突。...它就是我们的第三招神技 —— VSCode ◆ 强大的插件 VSCode 对我们前端来说都不陌生,是我们日日相伴的开发武器。当前 VSCode 几乎统一了前端圈的编辑器,功能强大,倍受好评。...因为我们上面配置了默认格式化程序为 Prettier,现在又配了保存时格式化,相当于将文件保存和 prettier 命令连接了起来。...文件夹下组件命名:中划线 user-id 组件导出命名:大驼峰 UserId 项目结构规范 项目结构规范主要是指 src 文件夹下的结构组织。
为了更好地阅读代码,将其适当缩进和分隔是一个优先考虑的问题,尤其是在处理长时间编写的代码时ーー样式、函数和处理程序的分隔非常关键,不仅对你而言如此,对你的同事而言也是如此。...这是超级容易设置,当你保存时,它会自动格式化代码。 prettier / prettier-vscode下载地址[8] 8. Material Icon Theme ?...处理大型项目是疯狂的,Path Intellisense 是你最好的朋友。当您尝试并在引用中键入路径时,Intellisense 将自动为您填写或显示建议。...vscode-icons下载地址[25] ---- 23. Color Picker ? 图片 颜色选择器扩展可以帮助您轻松地在 CSS 文件中选择颜色。它将立即反映或应用于您当前正在处理的属性。...这样可以节省时间ーー 你可以使用这个选项,而不必在浏览器或 Postman 那里来回地切换请求。 Rest Client下载地址[28] 感谢大家的阅读! ❝想要学习更多精彩的实战技术教程?
npm install typescript -G 然后运行以下命令查看TS的版本 tsc -V VSCode的插件 Prettier Formatter: 用来格式划代码 打开VSCode的设置ctrl...(command) + shift + p加入以下配置 "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode.../src",以及编译好的目录"outDir": "./dist", 其他设置从名称就能知道是什么作用的,这里就不过多介绍了。 在实际工作时需要提前创建好这两个文件夹。...比如我们现在在ts文件中输入一下内容 const name_str: string = "Tango"; console.log(name_str); 当我们保存时即可及时的看到输出结果 结尾 我们今天介绍了一个更适合用来学习的配置环境的方法...我是Tango,一个热爱分享技术的程序猿,我们下期见。 我正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!
eslint 对于eslint,想必大家都不陌生,是在我们日常开发中用于代码格式检查的工具,而关于eslint的详细配置,不是本文今天的重点,今天我们要说的,是如何在工程建设中灵活的使用它。...> .yml prettier的vscode插件 vscode提供了prettier的插件,让我们可以在本地编写一套prettier的配置并使用 然后我们可以在VScode的setting.json...": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode...... // #在对象或数组最后一个元素后面不加逗号 "prettier.trailingComma": "all", // (x) => {} 箭头函数参数只有一个时是否要有小括号。...如果项目有prettier的配置文件,在校验的时候也会被参考进去,而本地的配置则不会被参考,vscode的插件也不会被参考。
Indent Rainbow:对不同对的大括号显示不同背景颜色的区分(个人不太喜欢凌乱,没有使用) prettier:代码自动格式化,配置保存自动格式化 chinese:显示中文 Auto Rename...内部浏览器打开,免去切换到浏览器的麻烦,安装后在编辑器左侧边栏找到快捷按钮 guides:显示代码对齐辅助线 htmlhint:html标签嵌套错误提示 vscode-icons:文件图标,安装好后点击右下角设置选择文件主题图标...:可以显示每一行代码的作者,提交时间,以及commit信息,在想要知道哪行代码是谁改动的时候非常的实用 Git History:git log查看 Settings Sync :提供了同步个人设置的功能...,当我们需要换电脑进行开发时,比如回家用自己的电脑,或者换了新的电脑,该插件可以帮你同步之前做的设置,不需要在每台电脑上都重新设置一次(需要登录) Markdown Preview Enhanced :...如果是基于组件的项目,直接输入组件名插件会自动处理 imported CSS Peek:在html标签上显示自身包含的css Docker:有了这个插件可以在离线情况下创建 Dockerfiles。
图标 描述性的图标可以帮你区分不同的文件和文件夹。图标也让开发过程更有趣。 下面是两个VSCode标签页的比较。一个有图标,另一个没有。 有许多图标扩展可供选择。...流行的图标扩展有: vscode-icons Material Icon Theme Material Theme Icons Simple icons Prettier Prettier是一款有倾向的代码格式化程序...你可以自行配置小、中、大分别对应的大小。 Profile Switcher ProfileSwitcher可以在多个用户配置中切换。...你不需要每次共享VSCode屏幕时更改设置,只需要创建新的用户配置即可。...下图演示了怎样在两个用户配置Default和Content Creation之间切换: GitLens GitLens是一款开源扩展。它给VSCode添加了Git的功能。
他就是vscode. 我一向是对微软的东西不太感冒的。傻瓜式,大而全,慢。 唯独这个工具彻底改变了我的看法。...可以说是程序员的小情人都不为过。 对于情人,我们希望他能漂亮,善解人意,能力出众,温柔贤惠。...高亮提示 Code Spell Checker 单词拼写检查 HTMLHint HTML语法错误检查 markdownlint Markdown格式提示 vetur Vue 开发生态必备插件(官方推荐),处理的是...项目管理,让我们方便的在命令面板中切换项目文件夹....": "js-beautify-html", // 下面这一段不能少,否则导致VSCode格式化代码时无法正确格式化vue的style和script块(缩进为4个空格)。
今天介绍的是一款代码格式化工具,特别适合团队协作开发的时候使用。想必你应该正在使用,它叫 prettier。在 Github 上已达 31.4k star,如果你还不知道它的话就太可惜了。...因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号...es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号) "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验.../xxx,js 如果prettier在当前目录找不到配置文件,会一直向上级目录查找,直到找到或找不到。...所以,由于编辑器settings.json每个人的设置可能都不一样,要求每个人统一设置也不方便操作,而嵌入在项目中的配置文件则可以随着项目到达各个开发者,而且会覆盖每个开发者的不同代码喜好,真正做到团队代码统一的效果
如果你正在寻找更多的好用的 VsCode 工具,那么这篇或许能够帮助你。以下是 2019年为 JS 开发者提供的26个不可思议的VSCode工具。 1....,但是如果咱们正在处理另一个项目,其中Link 组件具有类似components/Link的路径,该怎么办?...vscode 时只需下载备份的配置就可以了。...Toggle Quotes Toggle Quotes是一个有趣的实用工具扩展,它允许咱们在引号之间进行切换。当需要在使用字符串插入时切换到反引号时,它就派上用场了。 ? 20....Prettier Prettier是VSCode的扩展,可自动格式化JavaScript/TypeScript 等等,使代码更漂亮。 ? 25.
网上有很多vscode的配置以及使用博客,但都没有本篇那么详细且全面。 VScode用户设置 1. 打开设置 文件–首选项–设置,打开用户设置。...每次保存的时候自动格式化; "editor.formatOnSave": false, //每120行就显示一条线 "editor.rulers": [ ], // 在使用搜索功能时,将这些文件夹...2、vscode-icons 改变编辑器里面的文件图标 3、Bracket Pair Colorizer 给嵌套的各种括号加上不同的颜色。...6、Regex Previewer 实时预览正则表达式的效果。 设置同步 花了一天终于把vscode配置成自己满意的样子,如果每换一次电脑就要重新来一次,大家一定会手撕了我。放心,早就帮大家准备好了。...在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器
vetur 和prettier以及stylus是用于vue开发时的代码格式化, 代码提示....vscode插件安装 Dracula Official 主题(我的最爱) Material Icon Theme 图标主题 Chinese Language Pack 中文语言包 GitLens 在代码中显示每一行代码的提交历史...不进行AI开发的人员,无需安装) Bracket Pair Colorizer2 每一对括号不同颜色 (太受欢迎,vscode已内置此功能) VS Code ES7 React/Redux/React-Native...": "esbenp.prettier-vscode" }, "[typescript]": { // 对ts文件进行格式化时,使用哪一种风格 (此处使用的是vscode中安装的....wxss 这种文件,会把它作为css文件来处理,以便相关插件提供对应的css的语法提示,css的格式化等。
image.png 安装完以后,左边会出现一个调试的小图标,打开以后再点击上方小齿轮进行配置。根目录下会自动新建 .vscode 文件夹以及 launch.json 文件,不用管。...上一个插件的演示图片中可以看到我的每一行代码都有上一次 git 提交的记录,那就是这个插件的功劳。 还有其他很多的操作,详情查阅下方链接。...安装完以后左侧列表会出现一个 文件夹 的小图标,点开以后就可以进行项目管理了,通常都是操作projects.json 这个文件,点击项目名字就可以切换了,也可以新窗口打开。...... ... 3.gif 代码格式化 Beautify 用来代码格式化的,但是我好像安装了没怎么用,我一直都是 eslint + prettier,有正在用的小伙伴可以在评论区发表一下看法,感兴趣的请自己搜索使用方法...更具体的配置内容查看链接 # vscode 使用Prettier插件格式化配置使用 image.png vetur / volar image.png image.png 使用 vue 进行开发的小伙伴都少不了跟它们打交道
下插入光标 Insert cursor above / below Ctrl + U 撤消上一个光标操作 Undo last cursor operation Shift + Alt + I 在选定的每一行的末尾插入光标...2.换另外一个电脑时,从云端同步配置到本地:当我们换另外一台电脑时,可以先在 VS Code 中安装 settings-sync 插件,安装完插件后,在插件里使用 GitHub 账号登录,登录之后,插件的界面上...Beautify: 代码格式化工具,相比之下,Prettier 是当前最流行的代码格式化工具,比 Beautify 用得更多。...Project Manager : 它提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里需要时一键切换, sftp : 将本地文件通过 ftp 的形式上传到局域网的服务器 新奇好玩 WakaTime...Search node_modules : 快速搜索node_modules文件夹(推荐)。
前言 习惯用webpack对项目开发工程化,接触小程序后,稍微有点不适应,市面上有taro等优秀的小程序框架可以使用,由于负责项目历史背景,而无法大规模改造,因此只能做一些简单的工程化方案 规范代码...test/index.test.js --coverage" } 3.编辑 .babelrc { "presets": ["@babel/preset-env"] } 4.创建 test 测试文件夹...自动切换回build环境 "lint-staged": { "**/*..../set-env.js" }, 2.git commit时,自动切换回build环境 "lint-staged": { "**/*..... && lint-staged" } } 3.切换脚本(set-env.js) // 切换环境 const { createWriteStream } = require('fs');
领取专属 10元无门槛券
手把手带您无忧上云