【vscode 插件集】前端必备插件 -- 第二弹 前端框架必备

上一篇博文:https://blog.csdn.net/weixin_45499478/article/details/114541517 到现在的阅读量和收藏量已经不少了,感谢大佬们的支持,又是三个月过去了,博主感觉第一篇推荐的插件已经不能满足开发需求了,为了更好的摸鱼 ,把大部分时间用在开发逻辑上,又整了几个不错的插件。
好了废话不多说,直接上干货。

卑微博主在线求赞

代码调试必备 – Debugger for Chrome

在这里插入图片描述
害,随着码龄增加 bug 不减反增,如果还是使用传统的 console 那可就 out 了!这个插件可以把在 vscode 中打的断点映射到 Chrome。
【vscode 插件集】前端必备插件 -- 第二弹 前端框架必备_第1张图片
直接 f5 调试,自动打开 chrome 浏览器,不过,调试的端口要和项目启动的端口一致,具体百度一下就知道这个 json 文件怎么配置了。

自动改写 vscode 的配置文件

在这里插入图片描述
这个插件可以在本项目,根据
【vscode 插件集】前端必备插件 -- 第二弹 前端框架必备_第2张图片
这个文件的配置暂时更改 vscode 编辑器的配置。

This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.

This repository is specific to the EditorConfig Extension for Visual Studio Code. Internally, it uses the editorconfig npm package, which is one of a few EditorConfig cores available.

react 全家桶代码补全

在这里插入图片描述
看图:
【vscode 插件集】前端必备插件 -- 第二弹 前端框架必备_第3张图片

ESLint 语法校验

在这里插入图片描述
在刚刚接触 Vue 时,饱受它的摧残 555……,不过回头看看语法校验确实挺香的。当你的代码不符合规范时,会提示报错,如果配合 Error Lens 插件,堪比 Java 的静态语法检查。

简便的 react 代码提示

在这里插入图片描述
这个插件没有上面推荐的好用,仅仅只有 react 自身的代码提示。

抄下官网快捷代码提示:

imr	Import React
imrc	Import React / Component
imrs	Import React / useState
imrse	Import React / useState useEffect
impt	Import PropTypes
impc	Import React / PureComponent
cc	Class Component
ccc	Class Component With Constructor
cpc	Class Pure Component
sfc	Stateless Function Component
cdm	componentDidMount
uef	useEffect Hook
cwm	componentWillMount
cwrp	componentWillReceiveProps
gds	getDerivedStateFromProps
scu	shouldComponentUpdate
cwu	componentWillUpdate
cdu	componentDidUpdate
cwu	componentWillUpdate
cdc	componentDidCatch
gsbu	getSnapshotBeforeUpdate
ss	setState
ssf	Functional setState
usf	Declare a new state variable using State Hook
ren	render
rprop	Render Prop
hoc	Higher Order Component

Vue、React 组件标签之间代码跳转

在这里插入图片描述
小众插件,图标都没有,但是非常好用,可以直接在 Ctrl + 左击跳转到 自定义组件对应的文件夹。

Vue css 样式跳转

在这里插入图片描述

上一版的插件推荐了 HTML 文件中 Ctrl + 左击 css 类名跳转,这个插件可以在 .vue 文件中 Ctrl + 左击 跳转到 CSS 定义的位置。

强大的 Vue 全家桶代码提示

在这里插入图片描述
不仅仅有 Vue 代码提示,还有 Elementui、Vuxui 等等 ui 框架的代码提示。

你可能感兴趣的:(vscode插件集,开发工具,vue,react)