前端开发vscode中比较使用的插件工具分享
程序员文章站
2022-06-26 08:40:32
前端开发vscode中比较使用的插件工具 (希望能帮助刚入门的前端开发小伙伴)Chinese (Simplified) Language Pack for Visual Studio Code中文简体语言包Auto Close Tag自动添加HTML / XML关闭标签Auto Rename Tag自动重命名配对的HTML / XML标签HTML Snippets代码自动填充HTML Boilerplate提供生成标准HTML样板代码Image Preview鼠...
前端开发vscode中比较使用的插件工具
(希望能帮助刚入门的前端开发小伙伴)
- Chinese (Simplified) Language Pack for Visual Studio Code
中文简体语言包 - Auto Close Tag
自动添加HTML / XML关闭标签 - Auto Rename Tag
自动重命名配对的HTML / XML标签 - HTML Snippets
代码自动填充 - HTML Boilerplate
提供生成标准HTML样板代码 - Image Preview
鼠标移到路径里显示图像预览 - intelliSense for CSS class names in HTML
项目中 css 文件里的名称智能提示在 html 中 - JavaScript (ES6) code snippets
es6代码提示器 - Live Server
生成本地服务,localhost服务,浏览器实时刷新 - Path Intellisense
路径自动补全 - AutoFileName
自动提示文件路劲选择 - Vetur Vue
语法高亮显示, 语法错误检查, 代码自动补全 - open in browser
浏览器中打开html - Markdown Preview Enhanced
实时预览markdown,markdown使用者必备 - Color Picker
css中颜色选择器 - Easy Sass(强烈推荐使用,编写样式,避免样式类名嵌套的麻烦)
编写.scss文件样式自动生成.css,代码中引入.css即可
vscode设置settings.json添加这段脚本,编写.scss保存后职生成.css文件,没有其他的多余文件。"easysass.formats": [ { "format": "expanded", "extension": ".css" } ],`` 注:也可以用less和stylus编写样式,安装详情的转译器即可
- GitLens — Git supercharged
会在左侧工具栏生成一个git工具图标,可以查看代码提交记录。(该谁背锅的证据记录清晰可见) - koroFileHeader
用于生成文件头部注释和函数参数说明 - any-rule
实现一系列的正则表达式,如手机号码和身份证,再也不用为匹配正则表达式而苦恼了。 - ESLint
校验代码格式,建议刚入门的前端不要装
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"eslint.autoFixOnSave": true,
"editor.formatOnPaste": false,
"git.enableSmartCommit": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "react",
"autoFix": true
},
],
vscode设置settings.json添加这段脚本,会根据eslint配置规则,格式化代码不规范的地方。
- background-cover
用于给VScode编译器设置漂亮的背景图,初次安装右下角会提示编译器被损坏,直接勾上不再提醒即可,右下角工具栏小人图标可以调节背景图清晰度。
本文地址:https://blog.csdn.net/qq_33286909/article/details/107140251