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

如何在使用vscode时在.tsx/jsx文件中进行css自动补全?

在使用VSCode时,在.tsx/jsx文件中进行CSS自动补全,可以通过安装相应的插件来实现。

一种常用的插件是"CSS Modules",它可以为React组件的CSS样式提供自动补全功能。安装该插件后,可以在.tsx/jsx文件中使用CSS Modules的语法,例如在组件中引入CSS文件并使用其中的类名。VSCode会根据CSS文件中定义的类名,自动提供代码补全和提示。

另一种常用的插件是"stylelint",它是一个强大的CSS代码检查工具,可以帮助开发者规范CSS代码,并提供自动补全功能。安装该插件后,可以在.tsx/jsx文件中编写CSS代码时,自动补全CSS属性、选择器等。

除了以上插件,还有其他一些插件也可以提供CSS自动补全功能,如"CSS IntelliSense"、"Auto Close Tag"等。可以根据个人喜好和需求选择适合自己的插件。

需要注意的是,为了使插件正常工作,需要在VSCode的设置中进行相应的配置。可以在"settings.json"文件中添加以下配置:

代码语言:txt
复制
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
}

以上是一种常见的实现方式,具体的插件选择和配置可以根据个人需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常用的一些vscode前端插件

false, // jsx把'>' 是否单独放一行 "prettier.jsxSingleQuote": false, // jsx使用单引号代替双引号 "prettier.parser...可以快速的查看某一行最近的一次修改是谁、什么时候、哪次提交修改的 14 Open-In-Browser 由于 VSCode 没有提供直接在浏览器打开文件的内置界面,所以此插件快捷菜单添加了默认浏览器查看文件选项...ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间 19 Npm Intellisense 自动补全引入...20 Path intellisense 自动补全文件名。最常用的地方是,当去import其它文件的时候,能够对文件进行提示,快速补全要引入的文件名。...,便可以打开 SVG 文件并查看它们 30 TabNine TabNine 是一款基于人工智能的代码自动补全工具 31 Night Owl 一个惊艳的主题,写代码动力十足 32 REST Client

1.9K30

vscode-前端插件

自动完成另一侧标签的同步修改 Auto Rename Tag 通过css选择器快速跳至css文件 CSS Peek 通过css选择器快速跳至css文件(Cmd+鼠标单击/Ctrl+鼠标单击);悬停css...选择器预览css定义(Cmd+鼠标悬浮/Ctrl+鼠标悬浮) open in browser vscode不像IDE一样能够直接在浏览器打开html,而该插件支持快捷键与鼠标右键快速浏览器打开html....tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间 jQuery代码智能提示 jQuery Code Snippets 自动提示文件路径 Path Intellisense 支持各种快速引入文件...,emmet,错误提示,格式化,自动补全,debugger。...设置关闭search.followSymlinks, 不然可能会引起cpu占用过高 python “python.linting.flake8Enabled”: true,方法自动补全() “python.linting.flake8Enabled

1.7K20
  • vscode 前端常用插件推荐「建议收藏」

    个人推荐编写前端代码,代码编辑器选择vscode,IDE选择WebStorm。...vscode安装插件只需要点击图片所示按钮,即可进入拓展,搜索框输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。...7.GitLens(使用git的必备)   方便查看git日志,git重度使用者必备 使用教程 8.HTML CSS Support (必备)   智能提示CSS类名以及id 9...vscode-icons 使用方法,配置如下json 15.open in browser (必备)   vscode不像IDE一样能够直接在浏览器打开html,而该插件支持快捷键与鼠标右键快速浏览器打开..., typescript, TSX 文件 18.Vetur (推荐)(vue必备)   Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。

    1.8K10

    VS Code 折腾记 - (16) 推荐一波实用的插件集

    Umi Pro :提供 umi js 框架的智能提示,包括补全,跳转,引用查看 React Hooks Snippets :React 内置 Hooks 几个 snippet perfect-css-modules... : css module 的体验加成,悬浮提示,智能提示,引用跳转 CSS Navigation :获取CSS的定义(跳转或者悬浮),支持 HTML/JSX/TSX ,及类名这些的智能提示,非常棒 VSCode...React Refactor :可以很方便对React组件代码进行重构 fabulous :可视化编辑 css, scss, js, jsx ,tsx 文件的样式,很方便!...Umi :很柔和的一款主题 Min Theme :很不错的双色调主题风格 Snazzy Plus :很不错的一款暗色调主题,内置几个风格 Hypersubatomic :高对比的主题风格,很漂亮 VSCode...Great Icons : 一款很精美的文件图标主题

    2.1K30

    VSCode 前端插件推荐

    开发综合推荐 插件名:别名路径跳转 使用说明: 别名路径跳转插件,支持任何项目, 使用场景: 当你开发页面, 想点击别名路径导入的组件(演示如下) 配置说明 下载后只需自定义配置一些自己常用的别名路径即可...更快速地编写内联样式,并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能 自动补全 跳转至样式和变量定义位置 创建 JSX/TSX 的行内样式 预览样式及变量内容 行内样式自动补全...插件名:vscode-styled-components 功能:JS文件写样式,有智能提示 主题类 vscode-icons 插件名:vscode-icons VSCode文件夹...&文件图标 其他推荐 以下插件,可能不常用,大家感兴趣可以试试 CSS Initial Value 插件名:vscode-icons 功能:显示每个CSS属性的初始值,当光标停留在css...属性 画板作图 插件名:Draw.io Integration 功能:VSCode画图,支持多人协作编辑图表… Echars 智能提示插件 插件名:echarts-vscode-extension

    1.7K40

    web大前端必备的VSCode插件,常用的(15个)「建议收藏」

    1.Open-In-Browser 由于 VSCode 没有提供直接在浏览器打开文件的内置界面,所以此插件快捷菜单添加了默认浏览器查看文件选项,以及客户端(Firefox,Chrome,IE)...当你 HTML 文件右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。...15.Themes 当然,众多的实用插件,岂能少了漂亮的主题呢?你每天都会与你的 VSCode 编辑器进行“亲密的接触”,为何不把它打扮得更漂亮些呢?...使用方法,配置如下json 30.open in browser (必备)   vscode不像IDE一样能够直接在浏览器打开html,而该插件支持快捷键与鼠标右键快速浏览器打开html文件..., typescript, TSX 文件 33.Vetur (推荐)(vue必备)   Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。

    5.6K40

    2022,VSCode 前端插件推荐

    当你开发页面, 想点击别名路径导入的组件(演示如下) 配置说明 下载后只需自定义配置一些自己常用的别名路径即可 // 文件名别名跳转 "alias-skip.mappings": {...,可以预测你将要写的代码进行提示 Template String Converter 插件名:Template String Converter 功能:字符串输入$触发,将字符串转换为模板字符串...更快速地编写内联样式,并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能 自动补全 跳转至样式和变量定义位置 创建 JSX/TSX 的行内样式 预览样式及变量内容 行内样式自动补全,同时支持...插件名:vscode-styled-components 功能:JS文件写样式,有智能提示 主题类 Dracula Official 插件名:vscode-styled-components...CSS Initial Value 插件名:vscode-icons 功能:显示每个CSS属性的初始值,当光标停留在css属性 画板作图 插件名:Draw.io Integration 功能:VSCode

    1.1K10

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

    汉化完成 插件 1.Open-In-Browser 由于 VSCode 没有提供直接在浏览器打开文件的内置界面,所以此插件快捷菜单添加了默认浏览器查看文件选项,以及客户端(Firefox,Chrome...另外,使用 JSX 或 TypeScript 项目中,它能够开箱即用。 ? 3.Faker 使用流行的 JavaScript 库 – Faker,能够帮你快速的插入用例数据。...4.CSS Peek 使用此插件,你可以追踪至样式表 CSS 类和 ids 定义的地方。...当你 HTML 文件右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。 ? ?...32.Vue VSCode Snippets   VUE代码自动补全插件 33.VueHelper   snippet代码片段 ?

    4K41

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

    CSS Peek 快速定位元素设置CSS文件及位置 HTML 文件右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的...CSS 代码 Class autocomplete for HTML 自动补全class=“” 属性 Codelf 给变量起名的神器 css-auto-prefix 给css加不同浏览器前缀 Debugger...for Chrome js调试的插件,前端项目Chrome运行起来之后,可以直接在VSCode打断点、查看输出、查看控制台 Document This 为js文件生成文档的代码注释。...console.log Vetur Vue 语法高亮显示, 语法错误检查, 代码自动补全 VS Code CSS Comments css代码注释。...Modules 对使用css modules的jsx标签的类名补全和跳转到定义位置 参考资料: https://www.cnblogs.com/zhn0823/p/6542335.html https

    3.5K10

    2023 最新最全 VSCode 插件推荐!

    VSCode React Refactor 这是一个专门为 React 开发人员设计的 VS Code 扩展。处理大型项目,重构可能很有挑战性。...可以使用 VSCode React Refactor 快速重构代码,它会将 JSX 代码片段提取到新的类、组件。此外,它还支持 TypeScript、TSX、常规函数、类和箭头函数。...Path intellisense 该插件用于自动补全文件名。当 import 其它文件,能够对文件进行提示,快速补全要引入的文件名。...Auto Rename Tag 使用该插件,可以重命名一个 HTML 标签自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签,而忘记修改结束标签。...当输入自定义组件的开始标签,它会自动添加结束标签。 CSS Peek 使用该插件,可以直接从 HTML 和 JavaScript 文件快速导航和编辑外部样式表定义的 CSS 样式。

    2.9K30

    VSCode 开发Vue必备插件

    Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint —— 语法纠错 Debugger for Chrome —— 映射vscode...上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改...JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间...Path Intellisense —— 自动路径补全 image.png HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式 image.png...Beautify——格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则 image.png Bracket Pair Colorizer——给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

    60310

    协调eslint和prettier,让代码书写更加流畅

    eslint 对于eslint,想必大家都不陌生,是我们日常开发中用于代码格式检查的工具,而关于eslint的详细配置,不是本文今天的重点,今天我们要说的,是如何在工程建设灵活的使用它。....js > .json > .yml eslint插件 初始化eslint的配置文件之后,eslint就会根据配置规则检查我们的代码,但是检测的错误只会在控制台进行输出 并且无法自动修复,开发的时候多少会有点不便..."eslint": "eslint src --ext .ts,.tsx,.js,.jsx --max-warnings=0",     "fix": "eslint src --ext .ts,.tsx...prettier prettier是一个代码美化的工具,它可以帮助我们规范化我们代码的格式,那么用了eslint为何还要使用prettier呢,因为eslint只对js生效,剩下的比如json,css类型的文件我们需要...> .yml prettier的vscode插件 vscode提供了prettier的插件,让我们可以本地编写一套prettier的配置并使用 然后我们可以VScode的setting.json

    1.6K20

    VSCode 前端常用插件集合

    下载很慢的问题 官网根据自己电脑 点击下载 2.下载可以去浏览器的下载内容里面,看到正在下载的vscode,然后点击上面的链接,会发生跳转 2....)Path Intellisense 智能路径提示,可以在你输入文件路径智能提示 效果: (6)HTML Snippets HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了...ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间 四、VUE插件 (1)Vetur Vue多功能集成插件,包括...:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。...、mpvue 和 wepy 框架,并提供 snippets) 需要输入<才会触发标签补全 输入空格会触发对应标签的属性补全 (3) wxapp-helper 选择创建wx组件,自动生成配套的文件,简直不要太爽

    85120

    高效开发软件——VSCode

    6)ESLint:js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广 泛使用的eslint配置 7)GitLens:方便查看git日志,git重度使用者必备 8)HTML CSS Support...持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间 11)jQuery Code Snippets:jQuery代码智能提示 12)Markdown...IDE一样能够直接在浏览器打开html,而该插件支 持快捷键与鼠标右键快速浏览器打开html文件,支持自定义打开指定的浏览器, 包括:Firefox,Chrome,Opera,IE以及Safari...15)Path Intellisense:自动提示文件路径,支持各种快速引入文件 16)React/Redux/react-router Snippets:React/Redux/react-router...语法智能提示 17)Vetur:Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格 式化,自动补全,debugger。

    1.1K20

    谷粒商城:开发环境配置

    name> http://maven.aliyun.com/nexus/content/groups/public  配置jdk8编译项目进行...ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含 js 代码文件的时间 HTML CSS Support —— 让 html 标签上写 class 智能提示当前项目所支持的样式...HTML Snippets —— html 快速自动补全 Open in browser —— 浏览器快速打开 Live Server —— 以内嵌服务器方式打开 Chinese (Simplified...global user.name "username" //(名字) # 配置邮箱 git config --global user.email "username@email.com" //(注册账号用的邮箱...一般用户目录下会有 或者 cat ~/.ssh/id_rsa.pub 登录进入 gitee,设置里面找到 SSH KEY 将.pub 文件的内容粘贴进去 使用  使用 ssh -T git@gitee.com

    59520

    VScode常用插件_AE必备插件

    这篇博客主要是我使用vscode过程的插件汇总,使用了这么长时间,总想有个总结,也方便日后查看,这里我将我使用的插件分为基础、框架、工具三个类型。...官网地址 VSCode插件官网地址,里面有很多的插件可以使用。 基础插件 这部分插件主要是和html、css、js有关的。.../demo.gif)] filesize 这是一款计算每个文件大小的插件,方便你对你的代码量进行可视化观察,及时缩小代码量,提供代码质量。...open in browser 这个插件是默认游览器打开你的网页,可以预览,但是需要手动刷新内容。插件地址 Path Intellisense 这个插件具有自动补全功能,非常方便。...webpack 这个插件是一个webpack的辅助工具,可以创建webpack配置文件的,还有babel编译帮助功能,插件地址 最后 这就是我日常使用的一些vscode的插件,在此作为一个汇总,方便日后查看

    1.7K10
    领券