当前位置:首页 » 《随便一记》 » 正文

Vscode常用插件及设置(前端版,实时更新ing

25 人参与  2023年05月08日 09:05  分类 : 《随便一记》  评论

点击全文阅读


1.open in borwser:

写完代码后鼠标右击将代码在浏览器中运行


在这里插入图片描述

2.Chinese

汉化Vscode
在这里插入图片描述

3.vscode-icons

html、css、js、less图标显示
在这里插入图片描述

在这里插入图片描述

4.Live Server

代码块写完后使用Live Server,每次修改代码Ctrl+S后浏览器无需再刷新即可跟着变化,
在这里插入图片描述
在这里插入图片描述
与win+左键或win+右键搭配爽歪歪,直接效率起飞!!!
在这里插入图片描述

5.HTML to CSS autocompletion

外联样式提示插件
在这里插入图片描述

6.Error Lens

错误提示信息
在这里插入图片描述

7.Easy LESS

将.less文件生成一个.css文件,在px单位转换到rem单位过程中使用最为方便
在这里插入图片描述

8.Auto Rename Tag

自动重命名HTML/XML标签
在这里插入图片描述

9.Auto Close Tag

自动闭合标签插件,成对标签输入时只需输出前面一个标签即可补全后面标签

在这里插入图片描述

10.代码换行实现自动对齐

左下角齿轮选“设置”搜索框搜‘Editor: Word Wrap’,将off改成on
在这里插入图片描述

11.Ctrl + S自动对齐

左下角齿轮选“设置”搜索框搜‘Format On Save’,勾选即可!
在这里插入图片描述

12.行内标签自动换行

在敲代码时候,我们使用a*5时,想获得到的代码形式时这样的
在这里插入图片描述
但很多情况下,呈现出来的效果是这样的
在这里插入图片描述
我们只需在设置 ——> 上方搜索“Syntax Profiles” ——> 在settings.json中编辑中添加 "inline_break": 2 即可
在这里插入图片描述

13.JavaScript (ES6) code snippets

ES6中语法代码智能提示
在这里插入图片描述

14.自动保存代码

设置——>Auto Save
在这里插入图片描述

15.Vue 3 Snippets

针对Vue的代码的插件
在这里插入图片描述

16.VueHelper

1)可以自动提示 Vue.js 组件选项的语法
2)为 Vue.js 标签提供语法高亮
3)增强代码智能提示的功能
4)为 Vue.js 组件提供快速跳转功能
在这里插入图片描述

17.ESLint

代码检查工具。规范我们写代码的格式, 保证团队内成员风格统一该插件与 11.Ctrl + S自动对齐 设置有冲突,使用该插件时应把保存时自动格式化设置关掉
在这里插入图片描述
在该插件扩展设置中添加以下代码:(在VSCode中启用ESLint插件,并在保存文件时自动运行ESLint检测并修复代码问题。)

"eslint.run": "onType","editor.codeActionsOnSave": {"source.fixAll.eslint": true}

点击全文阅读


本文链接:http://zhangshiyu.com/post/61482.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1