前端开发Vscode插件

前端开发vscode必备插件：
1.vscode代码换肤：
名称：One Dark Pro
展示：

用法：
进入插件页面后点击设置颜色主题进行切换
2.项目代码量统计工具：
名称：VS Code Counter
展示：

用法：
ctrl+shift+p进入工作区选择VscodeCounter:Count lines in directory，此时会进入此项目的默认路径，继续enter
3.编辑器使用时间及键入代码统计：
名称：Time Master
展示：

用法：在左侧工具栏进行查看
4.
名称：Windows opacity
展示：

用法：在vscode设置内输入0-255以内的一个值设置透明度

5.设置项目中文件
名称：VSCode Great Icons
展示：

用法：插件内选择“设置文件图标主题”进行切换
6.检验css/sass/less代码规范
名称：Stylelint
展示：

用法：在vscode中打开setting.json（文件->首选项->设置）添加以下内容，可使文件按下ctrl+s时，自动修复部分在违反在.stylelintrc.json中定义的规则的css或scss等样式写法，例如缩进，和属性写作顺序。

// stylelint配置
"stylelint.enable": true,
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"[scss]": {"editor.formatOnSave": true
}

7.代码格式化
名称：Prettier - Code formatter
展示：

用法：
设置setting.js中添加如下：

/*  prettier的配置 */"prettier.printWidth": 100, // 超过最大值换行"prettier.tabWidth": 4, // 缩进字节数"prettier.useTabs": false, // 缩进不使用tab，使用空格"prettier.semi": true, // 句尾添加分号"prettier.singleQuote": true, // 使用单引号代替双引号"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }""prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验"prettier.htmlWhitespaceSensitivity": "ignore","prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号"prettier.parser": "babylon", // 格式化的解析器，默认是babylon"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）"prettier.tslintIntegration": false,"terminal.integrated.allowMnemonics": true,"terminal.integrated.automationShell.linux": "" // 不让prettier使用tslint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔

8.路径提示
名称：Path Intellisense
展示：

用法：在文件中添加配置

"path-intellisense.mappings": {"@": "${workspaceRoot}/src","/": "${workspaceRoot}/"}

还要在package.json的同级文件添加jsconfig.json文件，加上以下配置：

{"compilerOptions": {"target": "ES6","module": "commonjs","allowSyntheticDefaultImports": true,"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules"]
}

9.html默认打开浏览器
名称：open in browser
展示：

用法：html文件直接右击“Open In Default Browser”或者快捷键Alt+B
10. git相关（参考文章）
名称： Git History
GitLens — Git supercharged

展示：
用法：参考转载：https://blog.csdn.net/qq_45363639/article/details/121440216
11.自动格式化代码
名称：ESLint
展示：

用法：参考转载：https://blog.csdn.net/weixin_47338877/article/details/122973836
12.快速添加注释
名称：Doxygen Documentation Generator
展示：

用法：输入/** 后自动补全 /** **/
13.为代码中的括号添加对称的亮色
名称：Bracket Pair Colorizer
展示：

前端开发Vscode插件相关推荐

VSCode前端开发工具插件--LiveServer实时刷新网页
VSCode前端开发工具插件–LiveServer实时刷新网页 1.概述当我们使用VSCode工具开发前端HTML页面时,修改内容后都要重新刷新网页才能展示更新代码的内容.那么有没有一种方式能够实时 ...
flutter开发vscode插件推荐（开发必备）
这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号"坚果前端,",或者加我好友,获取更多精彩内容 vscode开发插件推荐扩展是完成工作的快捷方式.许多扩展有助于减少重复性工 ...
前端工程化-VSCode插件集成脚手架和组件库
本文字数:14404字预计阅读时间:37 分钟目录 VSCode插件能做什么? VSCode可扩展能力有哪些? 如何开发一个VSCode插件? VSCode插件如何集成基建的脚手架和组件库?(FA ...
sublime text 3 前端开发常用插件
sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全: Emmet CoffeeScri ...
CDN公共库、前端开发常用插件一览表(VendorPluginLib)
============================================================= ==========================前端CDN公共库==== ...
react开发vscode插件推荐
由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发. 1. 代码提示类插件 1.1 Rea ...
走进前端，vscode插件的安装及使用
Part One 走进前端一.概述 web前端开发源网站设计,使用各种技术和框架创建页面系统呈现给用户的过程,通过编写代码的方式将图片.文字等素材在页面进行合理布局,达到与效果图相同的效果.前端开发 ...
走进前端、VSCode插件的安装及其使用
目录一.走进前端二.VSCode简单介绍三.VSCode的下载及安装四.VSCode插件的安装五.部分插件及其使用 1.汉化 2.Bracket Pair Colorizer 3.markd ...
【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

前端开发Vscode插件

前端开发Vscode插件相关推荐

最新文章

热门文章