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”,会看到两个可以在项目中使用的命令。
时非常有用 runtimeExecutable: 设置运行时可执行文件路径,默认是node 可以是其他的执行程序,如npm、nodemon runtimeArgs: 传递给运行时可执行文件的参数,例如:...主题 Move TS - Move TypeScript files and update relative imports 移动包含TypeScript的TypeScript文件和文件夹,并更新其相对导入路径...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 ,点击后会定位到
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,错误提示,格式化
例如,要为 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.
及其反对的代码,不要使用 * 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
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
另外,在使用 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
、重复代码、错误代码和漏洞代码的产生几率 千万不能自私 有些同学可能一时适应不了Lint带来的强制性操作,会在自己编辑器里关闭项目所有校验功能,这种自私行为会带来很严重的后果。...在保存文件时触发Lint自动格式化代码,这个操作当然不能100%保证将代码格式化出最正确代码,而是尽可能依据修复方案格式化出正确代码。...,遇到其他项目需覆盖配置时在工作区选项下插入eslint.options.configFile指定Eslint配置文件路径 重启VSCode:为了保障每次修改配置后都能正常格式化代码,必须重启VSCode...vscode-lint的eslint使用v7照样能使用Eslint,只要配置正确就能正常使用。...此时移步到VSCode右下角的工具栏,会看到禁用图标+ESLINT的标红按钮,单击它会弹出一个弹框,选择Allow Everywhere就能启用Eslint所有校验功能。
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。
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会变<!
Angular在VSCode下的插件 1.Angular TypeScript Snippets for VS Code 2.Angular VS Code TypeScript and HTML Snippets...(vscode的背景) 7.Visual Studio Code Typescript Auto Importer 8.vscode-icons 9.vscode-exports-autocomplete...(路径提示) 14.Prettify JSON (格式化json) 15.markdownlint (markdown语法提示插件) 16.Beautify (...强迫症的爱好者默认快捷键为 ctrl+k+f快捷键可以自定义) 17.VS Code JS, CSS, HTML Formatting(自动保存,格式化代码块) 18.Add Angular Files...// 快速生成代码(如组件,服务,通道等等) 20.TSLint // ts(编码约定) 检查代码错误 21.exports
如对于一个类实例对象,我们在使用这个对象时,只关心这个对象提供了哪些变量/方法;对于一个模块,我们在使用这个模块时,只关心这个模块导出了哪些对象。通过读取 Symbol,我们就可以获取这些信息。...二、TypeScript 与 VSCode 当我们在 VSCode 中新建一个 TypeScript 文件并输入 TS 代码时,可以发现 VSCode 自动对代码做了高亮,甚至在类型不一致的地方,VSCode...当我们将鼠标移到状态栏右下角 TypeScript 的版本上,会提示当前插件使用的 tsserver.js 文件所在路径。...三、TypeScript 与 babel 在开发过程中,错误提示功能由 VSCode 提供。但是我们的代码需要经过编译之后才能在浏览器中运行,这个过程中是什么东西处理了 TypeScript 呢?...Webpack 在调用 loader 处理文件时,也是一个文件一个文件调用的。所以 babel 想验证类型也做不到。并且 babel 的三个工作步骤中,并没有输出错误的功能。 没有必要。
Auto Import 自动查找、解析并提供所有可用导入的代码操作,适用于 Typescript 和 TSX。...使用 Ctrl+Alt+V 快捷键,将复制的 JSON 转换为 TypeScript 接口(支持 URL 中的 JSON)。 koroFileHeader 自动生成文件头部注释和函数注释。...Prettier - Code formatter Prettier 是一个固执的代码格式化程序。通过解析代码,使用自己的规则重新格式化,强制统一的样式,规则包括最大行长度。...Vetur 用于 VS Code 的 Vue 工具。 vscode-pdf 在 VSCode 中显示 pdf 文件。...yarn 在 VS Code 中使用 yarn。
你只需在空文件中输入 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
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
在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的安装路径(注意:涉及到转义字符,把 \
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 即可
可以运行下面的脚本来安装: 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 错误。
将会学到 【初级】eslint的使用和eslint配置——使代码符合javascript代码规范 【初级】prettier代码格式化配置——格式化代码,让代码好看 【初级】使用vscode扩展实现保存自动规范代码...extensions.json 也是可以的,我们可以在.vscode下新增extensions.json文件,配置推荐的插件。......的报错,为了解决这个报错,是husky正常检查,我们需要添加下npx的路径。...让ESlint支持TypeScript 安装 为了支持TypeScript的检查,我们需要加上ts相关的解析器和插件 npm install --save-dev typescript @typescript-eslint...注意:解决和vue解析的冲突 这个配置执行后会报 "Use the latest vue-eslint-parser" error这个错误,是因为和vue的解析器冲突了。
用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
领取专属 10元无门槛券
手把手带您无忧上云