首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

2023 最新最全 VSCode 插件推荐!

VSCode React Refactor 这是一个专门为 React 开发人员设计 VS Code 扩展。处理大型项目,重构可能很有挑战性。...可以使用 VSCode React Refactor 快速重构代码,它会将 JSX 代码片段提取到新类、组件中。此外,它还支持 TypeScript、TSX、常规函数、类和箭头函数。...再次右键单击该文件并重命名。 使用该插件,当右键单击文件,将看到一个新“Duplicate file or directory”选项。单击它,输入文件新名称,然后按回车键即可。...编程美化 Highlight Matching Tag 当有很多 HTML 标签,有时很难将结束标签定位到对应开始标签,反之亦然。使用该插件,单击开始标签,会看到结束标签带有下划线。...除此之外,该插件还有一些方便命令,因此当单击标签,可以使用ctrl + shift + P打开命令面板并搜索“Highlight Matching Tag”,会看到两个可以项目中使用命令。

2.7K30

Vscode笔记-24款插件

非常有用 runtimeExecutable: 设置运行时可执行文件路径,默认是node 可以是其他执行程序,如npm、nodemon runtimeArgs: 传递给运行时可执行文件参数,例如:...主题 Move TS - Move TypeScript files and update relative imports 移动包含TypeScriptTypeScript文件和文件夹,并更新其相对导入路径...TypeScript Hero TypeScript Hero是一个vscode扩展,使您生活更轻松。在编写大量代码TypeScript您可能需要vscode来组织导入。...安装完成之后,按下ctrl+shit+p,输入setting.json,选择首选项:打开设置(json)回车 设置中插入如下配置 JS // eslint配置项,保存自动修复 "editor.codeActionsOnSave...resolve VSCode对配置别名(alias)支持 代码中使用 @ (如:import {util} from '@/utils/index'),鼠标放在 util 上面 按 ctrl ,点击后会定位到

10.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

vscode-前端插件

require 包提示(node必备) Vetur (推荐)(vue必备) VueHelper Vue TypeScript Snippets Vue 2 Snippets bootstrap v3...Peek 通过css选择器快速跳至css文件(Cmd+鼠标单击/Ctrl+鼠标单击);悬停css选择器预览css定义(Cmd+鼠标悬浮/Ctrl+鼠标悬浮) open in browser vscode...,使用者可以定义不同括号类型和不同颜色 Debugger for Chrome 映射vscode断点到chrome上,方便调试 调试方式 ESLint js语法纠错,可以自定义配置,不过配置较为复杂...,建议使用网上一些广泛使用eslint配置 智能提示CSS类名以及id HTML CSS Support 智能提示HTML标签,以及标签含义 HTML Snippets JavaScript(ES6)...names require 包提示(node必备) Npm Intellisense Vetur (推荐)(vue必备) Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化

1.7K20

27 个提升开发幸福度 VsCode 插件

例如,要为 TypeScript React 项目创建自己代码片段文件,可以单击新建全局代码片段文件,输入 入typescriptreact.json。...TypeScript文件,新创建文件输入rsr,然后按回车或 tab 键 Vscode 就会帮咱们生成代码片段内容。...Stylelint 对我来说,出于以下几个原因,stylelint 我所有的项目中都是必须: 它有助于避免错误。 它加强了CSS中样式约定。 它与Prettier支持并驾齐驱。...只需要创建一个新文件写入下面这一行: https://google.com 然后转到命令面板(CTRL + SHIFT + P),单击Rest Client: Send request,它会在一瞬间弹出一个包含请求响应详细信息新选项卡...要使用它,将光标放在想要对齐代码中,使用CTRL + SHIFT + P打开命令面板(或者使用自定义快捷方式打开命令面板),然后调用Align 命令。 ? 21.

2K30

vscode中好用插件_捷达VS5和捷途X95哪个好

及其反对代码,不要使用 * TODO 重构此方法 * @param 该方法参数 */ Better Align 根据符号(如冒号、等于号)对齐多行代码 使用方法:Ctrl+Shift+p输入“...CSS Peek 快速定位元素设置CSS文件及位置 HTML 文件中右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置...Draw.io Integration 画流程图 Data Preview 预览数据文件 ESLint 检查Javascript编程语法错误 EditorConfig for VS Code 代码风格统一...VSCode Google Translate 多语言开发,切换语言包。...vscode-fileheader 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间 快捷键: Ctrl+Alt+i vscode-icons 设置目录列表文件类型图标 vscode-spotify

3.4K10

Visual Studio Code 更改侧边栏字体样式(CSS)

Visual Studio Code(以下简称 VSCode) 窗口放大以后侧边栏字体样式异常难看,让人感到非常别扭,bdfs 也找不到完整解决方案,最后知乎看了 muxu.jiu 回答,茅塞顿开...因为 VSCode 主要使用 TypeScript (TypeScript 是 JavaScript 一个超集) 编写,可以想到用开发人员工具更改 CSS 达到更改字体样式目的。...//vscode-app/ 和后面的文件名,双击 workbench.desktop.main.css,按 Ctrl + F 键,搜索框中粘贴 CSS Code,添加下面这行代码: ;font-family...快捷方法 打开 Visual Studio Code,点击 File,再点击 Open File,地址框中输入你 VSCode 安装地址 + resources\app\out\vs\workbench...,单击 workbench.desktop.main.css,打开文件,按 Ctrl + F 键,搜索框中输入 .part>.content{, 13px 后面添加 ;font-family: "Fira

2.7K20

VSCode前端必备插件,有可能你装了却不知道如何使用

另外,使用 JSX 或 TypeScript 项目中,它能够开箱即用。 ? 3.Faker 使用流行 JavaScript 库 – Faker,能够帮你快速插入用例数据。...当你 HTML 文件中右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置 CSS 代码。 ? ?...20.Vetur Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。 ?...34.Document This(js 和typescript注释模板) ctrl+alt+D,两次(注意:新版vscode已经原生支持,function上输入/** tab) ?...35.Project Manager 项目管理工具 这两种方式对于需要经常切换项目,比较耗时 为解决这个问题,vscode提供了Project Manager插件管理,开发时常用项目 (1)command

3.9K41

一键格式化代码带来快感 | 你还在为每个项目配置Stylelint和Eslint吗

、重复代码、错误代码和漏洞代码产生几率 千万不能自私 有些同学可能一适应不了Lint带来强制性操作,会在自己编辑器里关闭项目所有校验功能,这种自私行为会带来很严重后果。...保存文件触发Lint自动格式化代码,这个操作当然不能100%保证将代码格式化出最正确代码,而是尽可能依据修复方案格式化出正确代码。...,遇到其他项目需覆盖配置工作区选项下插入eslint.options.configFile指定Eslint配置文件路径 重启VSCode:为了保障每次修改配置后都能正常格式化代码,必须重启VSCode...vscode-linteslint使用v7照样能使用Eslint,只要配置正确就能正常使用。...此时移步到VSCode右下角工具栏,会看到禁用图标+ESLINT标红按钮,单击它会弹出一个弹框,选择Allow Everywhere就能启用Eslint所有校验功能。

1.5K10

我整理了近50个VS Code插件,Bug输出更快了

Auto Import 自动查找、解析并提供所有可用导入代码操作,适用于 Typescript 和 TSX。...使用 Ctrl+Alt+V 快捷键,将复制 JSON 转换为 TypeScript 接口(支持 URL 中 JSON)。 koroFileHeader 自动生成文件头部注释和函数注释。...通过解析代码,使用自己规则重新格式化,强制统一样式,规则包括最大行长度。 Quokka.js Quokka 是一个调试工具,可以为您正在编写代码提供实时反馈。它能够预览变量函数和计算值结果。...Vetur 用于 VS Code Vue 工具。 vscode-pdf VSCode 中显示 pdf 文件。...WakaTime 统计 VS Code 里写代码时间。 wechat-snippet 微信小程序代码辅助,代码片段自动补全。 yarn VS Code 中使用 yarn。

43720

Vscode】 前端项目文件自动格式化(.Vue,.js)

1.引言 开发vue项目,大家有没有遇到如下情况: 1.1 注释不对 vue文件,template中注释Ctrl+/代码 //<slot name="left" :itemLeft="itemLeft...JavaScript中,双引号自动改单引号,分号自动去掉 vue,模板中标签属性换行 2.安装插件 2.1 Prettier 它通过<em>解析</em>代码并<em>使用</em>自己<em>的</em>规则重新打印它,并考虑最大行长来强制执行一致<em>的</em>样式...,并在必要<em>时</em>包装代码。...更详尽<em>的</em>参考ESlint中文网 2.3 Vetur <em>vscode</em>下一款优秀<em>的</em>vue开发插件,具有如下特征 语法高亮 Snippet Emmet <em>错误</em>检测 格式化 智能感知 ......<em>在</em>style script template三部分中分别<em>使用</em>注释快捷键,css会变/* */,js 会变//,html会变<!

2.8K10

TypeScript是如何工作

如对于一个类实例对象,我们使用这个对象,只关心这个对象提供了哪些变量/方法;对于一个模块,我们使用这个模块,只关心这个模块导出了哪些对象。通过读取 Symbol,我们就可以获取这些信息。...二、TypeScriptVSCode 当我们 VSCode 中新建一个 TypeScript 文件并输入 TS 代码,可以发现 VSCode 自动对代码做了高亮,甚至类型不一致地方,VSCode...当我们将鼠标移到状态栏右下角 TypeScript 版本上,会提示当前插件使用 tsserver.js 文件所在路径。...三、TypeScript 与 babel 开发过程中,错误提示功能由 VSCode 提供。但是我们代码需要经过编译之后才能在浏览器中运行,这个过程中是什么东西处理了 TypeScript 呢?...Webpack 调用 loader 处理文件,也是一个文件一个文件调用。所以 babel 想验证类型也做不到。并且 babel 三个工作步骤中,并没有输出错误功能。 没有必要。

5.4K30

WEB 前端插件整理

你只需空文件中输入 html,并按 Tab 键,即可生成干净文档结构。 #10 CSS Peek 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义地方。...当你 HTML 文件中右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置 CSS 代码。...AngularJs、Ts、JQ插件 #1 angular2-switcher 通过三个简单键绑定,组件,模板和样式之间快速切换。当光标位于变量上,只需按下F12键即可支持转到模板变量定义。...#4 Quokka.js 实时观看js变量变化 #5 vscode-faker 生成假数据,地址,电话,图片等等 打开方式shift+ctrl+p 然后输入faker 就可以选择了 #6 Prettier...#12 TypeScript Import 专门处理TS内模块导入,和#12互补; #13 stylelint 语法校验,比内置要全更智能 #14 Angular Files vsc中集成angular-cli

1.4K30

Cocos Creator基础教程(9)—优化代码编辑器

VSCode 首先用VSCode打开Cocos Creator项目,使用shift+ctrl+p/shift+cmd+p打开命令控制台。 ?...Webstorm 接下来我们看在Webstorm中怎么排除干扰文件,先在Webstorm中打开Cocos Creator项目,使用快捷键ctrl+,/cmd+,打开Preferences窗口,左上角过滤框输入...Webstorm Webstorm除了像上述安装creator.d.ts文件外,还需要设置JavaScript语法为ES6,不然你可能会在IDE中看看到一大片红色语法错误。...配置上Cocos Creator源码路径,可以进一步提高Webstorm代码提示精度,见下图: ? 点击Add…按钮,添加Cocos Creator源码路径: ?.../CocosCreator.app/Contents/Resources/engine/cocos2d 点击OK保存 对于高精度代码补全来说使用TypeScript才是更好选择,可惜Shawn使用TypeScript

1.7K50

Java开发环境配置Vscode搭建

Oracle官网下载涉及到账号注册,也可访问 这里 快速下载,提取码:peng 下载好后,双击程序运行 所有操作无需更改,继续下一步即可 复制JDK安装路径。...继续进行系统环境变量配置操作 右键此电脑->属性->高级系统设置->环境变量,进入如下界面 1.粘贴上面电脑安装JDK路径路径可以更改,此处按照原路径完成后续操作): 单击“新建”,如图输入以下内容...下面我们就在Vscode中配置Java开发环境 首先在Vscode扩展中找到这个插件进行安装 Java Extension Pack是一个扩展包,里面包含了Java开发必要一些插件,一般基础性使用安装这个足矣...使用键盘快捷键 Ctrl+Shiift+P 打开命令面板,输入 Configure Java Runtime ②处可以看到自己JDk安装版本,如果是先安装Vscode也可以点击③处在弹出网站上下载...JDK,按照上文配置即可 快捷键 Ctrl+, 输入settings并单击 Edit in settings.json javahome出粘贴JDK安装路径(注意:涉及到转义字符,把 \

1.6K30

深度讲解TS:这样学TS,迟早进大厂【21】:代码检查

可以运行下面的脚本来安装: npm install --save-dev eslint 由于 ESLint 默认使用 Espree 进行语法解析,无法识别 TypeScript 一些语法,故我们需要安装...@typescript-eslint/parser,替代掉默认解析器,别忘了同时安装 typescript: npm install --save-dev typescript @typescript-eslint...关闭、警告和报错含义如下: 关闭:禁用此规则 警告:代码检查输出错误信息,但是不会影响到 exit code 报错:发现错误时,不仅会输出错误信息,而且 exit code 将被设为 1(一般 exit... VSCode 中集成 ESLint 检查§ 在编辑器中集成 ESLint 检查,可以开发过程中就发现错误,甚至可以保存自动修复错误,极大增加了开发效率。...} 这样就实现了保存文件自动格式化并且自动修复 ESLint 错误

2.5K20

01·灵魂前端工程师养成-安装配置VScode

Files:Auto Save 原本off修改成onFocusChange  ---- 设置自动格式化  搜索栏中,搜索format on save然后将 Editor:Format On...,搜索选中区域   区域搜索:Ctrl + f  3.设置语法(不要使用纯文本)  4.Emmet快捷写代码  输入!...按Tab键,会自动生成一个html代码,很方便  高难度操作 选中1 2 3 4 按住 Ctrl + Shift + p 输入 emmet wrap 点击 输入缩写包围个别行  输入div*...敲 Enter 确认,即可多行代码被标签包住   5.Git操作 6.调试JavaScript/TypeScript ---- 快捷键 Ctrl + p : 找文件 Ctrl + Shit...+p : 输命令 alt + 单击 : 多位置输入 注意:mac本 Ctrl 换成 Command , alt 换成 option 即可

40820

关于vs2010中编译Qt项目出现“无法解析外部命令”错误

用CMake将Qt、VTK和ITK整合后,打开解决方案后添加新类时运行会出现“n个无法解析外部命令”错误。...原因是新建类未能生成moc文件,解决办法是: 1.右键 要生成moc文件.h文件,打开属性->常规->项类型改为自定义生成工具。 2.新生成选项中,填上相关内容: ?...GeneratedFiles\$(ConfigurationName)\moc_%(Filename).cpp" 说明:Moc%27ing ImageViewer.h... //.h文件填要编译。...关于moc文件,查看:qt中moc作用 简单来说:moc是QT预编译器,用来处理代码中slot,signal,emit,Q_OBJECT等。...moc文件是对应处理代码,也就是Q_OBJECT宏实现部分。 XX.ui文件生成ui_XX.h: 当前路径命令行输入uic XX.ui -o ui_XX.h

6.4K20

VsCode 各场景高级调试技巧,有用!

VsCode自从诞生以来,以其各自优异特性迅速走红。尤其是对于前端开发小伙伴来说,几乎成为必不可少开发工具。所以,熟练掌握VsCode各自使用技巧与调试技巧会让你日常开发工作效率倍增。...ctrl + shift + c在外部打开终端并定位到当前项目路径 ctrl + 按键1左边符号显示隐藏终端面板 Ctrl+B 切换侧边栏 Ctrl+\ 快速拆分文件编辑 alt + 单机左键 添加多处光标...VsCode中快速调试一个Node项目为例,演示断点基本使用。.../launch.json文件,指定程序入口文件 program字段用于指定你程序入口文件,${workspaceFolder}表示当前项目根路径 image.png 程序中添加断点,只需要点击左侧边栏即可添加断点...该字段作用是执行命令前先执行改task任务。 image.png 注意,如果编译后js文件不在相应位置,通过图中outFiles字段可以指定ts编译后js路径

1.1K20
领券