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

当我输入的时候,Vscode一直将html标签插入到javascript中

当你在Vscode中输入时,如果发现Html标签一直插入到JavaScript中,这可能是因为你没有正确设置语言模式。

Vscode是一款功能强大的代码编辑器,它支持多种编程语言和文件类型。默认情况下,Vscode会根据文件的扩展名来识别文件类型,并自动应用相应的语言模式。然而,有时候Vscode可能会识别错误,导致将html标签插入到JavaScript中。

要解决这个问题,你可以手动更改语言模式。在Vscode的右下角,可以看到当前文件的语言模式(例如,"JavaScript"或"HTML")。点击该语言模式,然后选择正确的语言模式,例如"HTML"。

另外,你还可以通过以下快捷键来更改语言模式:

  1. 使用快捷键 Ctrl + K,然后按 M,在打开的输入框中输入相应的语言模式,例如"HTML"。
  2. 使用快捷键 Ctrl + Shift + P,然后输入"Change Language Mode",然后选择正确的语言模式。

一旦你更改了语言模式,Vscode就会正确地将html标签插入到HTML文件中,而不是JavaScript文件中。

总结:

当Vscode一直将html标签插入到JavaScript中时,你可以通过手动更改语言模式来解决这个问题。确保将语言模式设置为正确的文件类型(例如"HTML"),这样Vscode就会正确地插入标签。

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

相关·内容

时候提高你编码效率了【VSCode篇】

必备插件 Auto Close Tag - 自动闭合 HTML 标签 Auto Import - 自动 import 插件 Auto Rename Tag - 修改 HTML 标签时,自动修改匹配标签...Bracket Pair Colorizer - 给括号前后进行着色 Can I Use - HTML5、CSS3、SVG 浏览器兼容性检查 Code Spell Checker - 检查代码拼写错误...CSS Support - html,css 提示 HTMLHint - HTML 格式提示 JavaScript (ES6) code snippets - 支持 ES6 语法代码段 JavaScript..., // 控制是否在键入时自动显示建议 "editor.quickSuggestions": { "strings": true }, // 每次保存时候代码按 eslint 格式进行修复...(最多 3 个) Cmd+\,相当于一个屏幕分成两半,可以实际操作一下 左右 3 个编辑器快捷键 Cmd+1 Cmd+2 Cmd+3,在使用上面的分界面操作之后会用到 关闭打开资源管理器 Cmd+

1.4K10
  • vscode插件大全_腾讯视频vip插件

    HTML Snippets(代码提示) Auto Close Tag(自动闭合标签) Bracket Pair Colorizer(括号做颜色区分) Browser Preview(VSCode...Settings Sync(配置同步云端) 可以让我们vscode配置同步云端,当我们跟换电脑或者再次安装vscode时候,只需要登录账号即可同步配置了 wakatime(...编程时间及行为跟踪统计) 编程时间及行为跟踪统计 二、效率神器 ✨HTML Snippets(代码提示) HTML代码片段,该插件可为你提供html标签代码提示,不用键入尖括号了...模块) 可自动完成导入语句中npm模块 open in browser(快速打开html文件浏览器预览) 快速打开html文件浏览器预览 Path Intellisense(快速引入文件)...丰富快捷键,边写边看,轻松转化为html或pdf文件 vscode-drawio(画流程图) 可以在vscode里面快乐画流程图,新建 .drawio 后缀文件并拖入vscode Polacode

    4.6K40

    VSCode插件大全|VSCode高级玩家之第二篇

    小总结 VSCode还有非常多主题可以选择,如果我推荐主题中没有你们喜欢,可以在插件搜索框输入theme,就会出来很多主题供大家自由选择哦!...自动关闭标签 插件名:Auto Close Tag 自动添加HTML/XML关闭标签,与Visual Studio IDE或SublimeText相同。当我们填写了开始标签,结束标签就会被自动加上。...用这个插件可以告别每次改变标签时候要重复修改头部和尾部标签。特别是标签内内容非常多时候,要改确实很费劲。...这个插件尝试在任何地方匹配标记: 从标记属性、字符串内部、任何文件,同时还提供广泛样式选项来定制标记高亮显示方式。 官方支持标签: HTML和JSX。...在这里插入图片描述 React支持 插件名:ES7 React/Redux/GraphQL/React-Native snippets 这个扩展为你提供了JavaScript和ES7React/Redux

    4.7K30

    vscode学习笔记

    /p/64021066) 配置 配置代码片段:设置-用户代码片段,配置html/js/css等快速通过某个指令生成对应代码片段,$1是占位,代表生成代码后,光标 直接定位对应位置,每行代码都用双引号括起来...Tag:html标签自动匹配修改 live server :启动本地http服务,且保存自动刷新页面,底部go live 启动本地浏览器 Live Sass Compiler:监听scss文件改动并实时编译为...htmlhint:html标签嵌套错误提示 vscode-icons:文件图标,安装好后点击右下角设置选择文件主题图标 import-cost:行尾显示导入包大小(但是安装后不显示,不知道什么原因)...,可以保存打开项目favirate,以后可以在这里直接选择自己已经保存好项目打开 GitLens :可以显示每一行代码作者,提交时间,以及commit信息,在想要知道哪行代码是谁改动时候非常实用...如果是基于组件项目,直接输入组件名插件会自动处理 imported CSS Peek:在html标签上显示自身包含css Docker:有了这个插件可以在离线情况下创建 Dockerfiles。

    1.2K20

    前端学习编辑器介绍

    第二种、VScode编辑器,我用最多编辑器,不是说它有多好,实在是一直在用这个编辑器,有感情了哈哈,我不会说是因为它是免费。同样,这款编辑器同样支持mac系统和win系统。...(必备)   自动闭合HTML/XML标签 2.Auto Rename Tag (必备)   自动完成另一侧标签同步修改 3.Beautify (必备)       格式化 html ,js,css...必备)   智能提示HTML标签,以及标签含义 10.JavaScript(ES6) code snippets (必备)   ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx...不像IDE一样能够直接在浏览器打开html,而该插件支持快捷键与鼠标右键快速在浏览器打开html文件,支持自定义打开指定浏览器,包括:Firefox,Chrome,Opera,IE以及Safari...向上面一行添加游标 Control + Shift + ↓ 向下面一行添加游标 Command + J 删除当前行与下一行内容合并成一行(光标未选中多行内容时候) 或 多行内容合并成一行(已选择需要合并多行时

    1.5K80

    vscode下配置vue.js插件

    1、vetur 2、Vue 2 Snippets:主要加强vue便捷写法 3、language-stylus 4、Auto Close Tag:自动闭合标签所用 5、Auto Rename Tag:自动修改重命名配对标签...插件 16、Beautify:主要拿它来格式话html 17、StandardJS - JavaScript Standard Style:配合该插件可以自动将你代码格式化成规范代码。...18、ESLint:规范代码格式 同时,在设置要自己定义: // vscode默认启用了根据文件类型自动设置tabsize选项 "editor.detectIndentation": false..., // 重新设定tabsize "editor.tabSize": 2, // #每次保存时候自动格式化 "editor.formatOnSave": true, // #每次保存时候代码按...": true, // #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vuejs

    3.3K20

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

    3.Faker 使用流行 JavaScript 库 – Faker,能够帮你快速插入用例数据。...你只需在空文件输入 html,并按 Tab 键,即可生成干净文档结构。 ? ? 6.Prettier Prettier 是目前 Web 开发中最受欢迎代码格式化程序。...15.htmltagwrap 可以在选中HTML标签中外面套一层标签 使用方法:选中要包裹代码,快捷键Alt+w,默认外包裹标签为p,可以在设置里搜索htmltagwrap外包裹标签改为div ?...23.JavaScript(ES6) code snippets   ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含...26.Debugger for Chrome   映射vscode断点到chrome上,方便调试 ? image 27.Auto Close Tag   自动闭合HTML/XML标签 ?

    4K41

    Vue 基于VSCode结合Vetur+ESlint+Prettier统一Vue代码风格

    }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": {...或者选中要格式化代码,按Alt+Shift+F,未设置默认格式化器时候,会弹出配置默认格式化器提示,然后按提示操作即可 格式化代码 按上述配置,按Ctrl + S手动保存文件时会自动化使用Vetur...补充说明 ESlint插件 主要用于识别和报告ECMAScript/JavaScript代码语法模式是否存在错误 Vetur插件 这里Vetur主要用途是语法高亮,其次是代码格式化,支持以下格式化器....prettierrc 文件存在,并且显示设置了 tabWidth ,则Vetur 自动忽略 vetur.format.options.tabSize配置项目,总是使用.prettierrc配置值。...、混合标签和空格、引用样式等),包括JavaScript,Flow,TypeScript,CSS,SCSS,Less,JSX,GraphQL,JSON,Markdown。

    6.9K20

    【图文并茂】六十多个 vscode 插件,助你打造最强编辑器

    Highlight Matching Tag 这也是一个找对象插件,找标签对象,看我上一个插件演示图片中,当我点击一下 html 标签,配对标签就会出现下划线来指示你谁和谁是一对。...记得添加.gitignore,不然每次提交代码时候就要遭重了。 open in browser 在浏览器打开 html 文件。...使用方法按 F1(windows) ,输入对应命令即可。 CSS Peek 可以通过点击类名迅速定位样式定义。...JavaScript (ES6) code snippets Jest Snippets HTML Snippets Vue VSCode Snippets Vue 3 Snippets ... ......选中一个模式回车进入列表,再回车就可以输入代码中了。 Settings Sync 可以同步 vscode 配置插件,由于我没有换过电脑,所以还没亲测,但是网上用的人还是蛮多

    3.3K40

    编辑器VSCode使用心得

    ,微软开源,github-star:66k 官网地址:https://code.visualstudio.com/ 大概是从去年年初时候接触到vscode一直使用到今天,我并没有否定上面所列举那些编辑器...更多功能需要自己挖掘 Auto Close Tag 截止目前下载量:2.2M 自动添加HTML/XML关闭标签,写前一半标签,后面一半自动补全 Auto Rename Tag 截止目前下载量:1.1M...自动重命名成对HTML/XML标记 修改了html标签一半(前面或后面),另一半自动修改,(注意输入法要在英文模式下) Beautify 截止目前下载量:6.7M 代码中美化javascript、JSON...用于vscode编辑器ES6语法JavaScript代码片段(同时支持JavaScript和TypeScript)。...,使用转义字符来书写制表符Tab、双引号"等内容; 使用${num: default 使用${num: default name}来定义输入位置,按下Tab键来递进光标下一个; num值为0,1,2,3

    1.4K30

    网络安全自学篇(十八)| XSS跨站脚本攻击原理及代码攻防演示(一)

    代码是存储在服务器,如在个人信息或发表文章等地方,插入代码,如果没有过滤或过滤不严,那么这些代码储存到服务器,用户访问该页面的时候触发代码执行。...而当我输入恶意代码时候,比如提交 给后台,它会执行我们JS代码,弹出hack窗体。从而证明了DOM-XXSS是存在。...四.如何防御XSS 由于XSS通常可以插入在script标签HTML注释、标签属性名、标签属性值、标签名字、CSS等,所以接下来我们简单讲讲如何防御XSS攻击。...3.标签黑白名单过滤 有时根本就不需要考虑它是不是HTML标签,我们根本用不到HTML标签。不管是采用输入过滤还是输出过滤,都是针对数据信息进行黑/白名单式过滤。...如果在Cookie设置了HttpOnly属性,那么通过js脚本无法读取到Cookie信息,这样能有效防止XSS攻击。 最重要是:千万不要引入任何不可信第三方JavaScript页面里!

    15.7K75

    那些好用 VS Code 插件,究竟是如何提高编码效率

    换行符和嵌入选项卡根据插入代码段上下文进行格式化 description IntelliSense 显示代码段描述(非必填) 首先这份配置会有一个名字即 forLoop ,是可以用户随意自定义...语法是用逗号分隔值枚举,触发插入代码段并选择占位符后,选项提示用户选择其中一个值。...这个语法允许我们使用name 或{name:default} 这两种方式来设置插入变量值。未设置变量时,插入其默认值或空字符串。...当变量未知(即未定义其名称)时,插入该变量名称,并将其转换为占位符。从 VS Code 官网上可以看到所有支持变量: ?...接下去我们就要攻克最后一个点:属性值和属性名。这就涉及分析当前文本结构,我们默认单双引号所在位置标示属性值,挨着 < 符号标签名,剩下就都是作为属性值。

    1.5K21

    60 个神级 VS Code 插件!!

    Highlight Matching Tag 这也是一个找对象插件,找标签对象,看我上一个插件演示图片中,当我点击一下 html 标签,配对标签就会出现下划线来指示你谁和谁是一对。...可能是因为我装了各种奇奇怪怪插件,我现在想导入什么东西时候,一大堆提示,随便选一个都能导进来 Auto Rename Tag 自动修改标签名,重命名一个开始标签时,自动重命名配对结束标签。...使用方法按 F1(windows) ,输入对应命令即可。 推荐:《Java开发手册(嵩山版)》建议看看 CSS Peek 可以通过点击类名迅速定位样式定义。...JavaScript (ES6) code snippets Jest Snippets HTML Snippets Vue VSCode Snippets Vue 3 Snippets ... ......选中一个模式回车进入列表,再回车就可以输入代码中了。 Settings Sync 可以同步 vscode 配置插件,由于我没有换过电脑,所以还没亲测,但是网上用的人还是蛮多

    2.4K10

    使用Visual Studio Code编写Vue札记

    可以使用 npm install -g eslint-plugin-html 来安装 接着,安装了 HTML 插件后,还需要在 vscode 配置下 ESLint: "eslint.validate...自动闭合HTML标签 Auto Rename Tag 修改HTML标签时,自动修改匹配标签 Bookmarks添加行书签 Can I Use HTML5、CSS3、SVG浏览器兼容性检查...Picker 拾色器 Document This 注释文档生成 EditorConfig for VS Code EditorConfig插件 Emoji 在代码输入emoji ESLintESLint...插件,高亮提示 File Peek 根据路径字符串,快速定位文件 Font-awesome codes for html FontAwesome提示代码段 ftp-sync 同步文件ftp...Ctrl + Alt + Up 向上插入光标 Ctrl + Alt + Down 向下插入光标 Ctrl + U 撤销上一个光标操作 Shift + Alt + I 在所选行行尾插入光标

    39.1K92
    领券