转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文参考:https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6

编程是复杂的。在保证高生产力和代码质量的同时,有许多最优的方案需要记住,有许多准则需要遵循,还有许多 "已知问题 "需要避免。

现代开发过程如果没有自动化完成的工作,还是比较困难的。在本文中,我就将为大家介绍一些可以为前端开发人员提高开发效率的VSCode自动化技巧。

Live Server

一般情况下,当你在VSCode修改代码后,你需要手动刷新浏览器才能看到效果。也就是说,如果你对代码进行了100次更新,你需要刷新浏览器100次,这是一件很累且耗时的工作。

Live Server是VSCode中的一个很酷的插件,它可以为你自动完成上面说的这些工作,让你不必每次在保存后都要手动打开和刷新浏览器,这是由Live Reload这个Live Server的功能提供的,这个功能可以确保你的代码可以在保存后立即呈现。另外,如果你启用了VSCode的自动保存功能,Live Reload将会变得更酷,更方便。

Turbo Console Log

Turbo Console Log是可以帮你自动编写日志信息的工具, 在Turbo Console Log的帮助下,你可以。

  • 自动嵌入有意义的日志信息。
  • 对当前文档中所有由插件嵌入的日志信息进行注释和取消注释。
  • 从当前文档中删除所有由插件嵌入的日志信息。

Live SASS编译器

可以通过Live SASS编译器将你的SASS或SCSS文件轻松地自动编译成CSS,并在代码编辑器本身的内部实时编译,并自动在浏览器中为你提供应用程序或编译后的样式的实时预览,就像这样。

Live SASS 编译器是VSCode一个便捷的扩展插件,其中有很多很酷的功能,包括:

  • 实时SASS和SCSS编译。
  • 快速状态栏控制
  • 可自定义扩展名(.css或.min.css)
  • 可自定义导出的CSS样式(扩展、压缩、压缩、嵌套)
  • 可自定义导出CSS的文件位置

自动重命名标签

在一个包含成百上千行代码的应用程序中,你是否有因为要更改一个HTML标签而忘记或错误地更改了成对的另一个标签?这种工作很容易眼花且低效。

你现在有两个选择:一个是手工去维护成对标签再或是直接安装Auto Rename Tag插件,交由它帮你自动完成这些工作。

Auto Rename Tag是对开发人员很有帮助的插件,顾名思义,他会在更新其中一个承兑标签时自动更新另外的标签。

ESLint

代码检测是用于检查程序中的语法错误或不按特定风格准则的代码,

而ESLint这样的代码检测工具允许开发人员在不执行JavaScript代码的情况下发现其代码的问题。ESLint是VS Code中下载量最大的扩展之一,有近1300万次下载,它能确保你坚持标准的代码准则,类似像定位、缩进等。这个扩展需要你在本地或全局电脑上安装ESLint,你只需运行npm install eslint即可。

以下是ESLint的一个演示

当你的代码量较小时,上面这个错误还是很明显的。但如果你的代码超百行。通过运行ESLint,您可以快速识别代码中的问题,以提高代码的完整性和质量。

Prettier

Prettier,一个在前端开发者中流行的VSCode扩展,拥有1100万的下载量,并且还在不断增长,它可以帮你快速格式化你的代码,只需要按一个按钮,代码就格式化完成了。

  • 在样式指南更改时,Prettier可以自动应用到整个代码库中。
  • 不需要花功夫去修正格式化。
  • 不用在拉取请求中浪费时间讨论样式。
  • 不需要在样式指南中查找规则。

Prettier不仅支持JavaScript,还支持许多开箱即用的不同语法,包括TypeScript、CSS、JSON、JSX、GraphQL等等。

还有其他类似的扩展,其中最受欢迎的是,Beautify! 通过一些设置和配置,你再也不用担心写出丑陋的代码了。Beautify可以将你的代码变成漂亮而一致的代码。

Pre-Commit Hooks

到目前为止,我已经讨论了VSCode中不同的扩展,你可以使用这些扩展来提升你的生产力。作为本文的最后一个提到的部分,我将讨论pre-commit hooks。那么实际上什么是pre-commit hooks呢?有些人可能以前听说过,有些人可能没有听说过。

你是否曾想在每次提交或推送代码时都运行一条命令?那么 git 钩子就是你要找的东西了。

Git 钩子是一种自定义脚本,它可以在 git 命令之前或之后运行,以自动化手动任务。有好几个 git 钩子可用,而pre-commit hook是我最喜欢的一个。

以下是它一个很出色的功能简介:

  • 它们会在你输入提交信息之前就开始自动运行。
  • 用零以外的其他数据退出会中止提交。
  • pre-commit hook用于检查即将提交的快照。

通过使用pre-commit hook,您可以检查代码样式、尾部多余的空格、不需要的导入,或者检查有关新方法的适当文档。

总结

优秀的工具可以帮助开发者写出更快、更干净、更一致的代码。微软推出的Visual Studio Code(VS Code)自推出之初,就逐渐赢得了很多人的青睐。

在这篇文章中,我只是列了一部分你可能在VSCode中使用的不同扩展和方法,这些扩展和方法将提高你的生产力,使开发过程自动化。如果你发现其他值得分享的扩展插件,请在下面的评论中提及它们。

面向前端开发人员的VSCode自动化插件的更多相关文章

  1. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  2. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  3. 给 Web 前端开发人员推荐20款 CSS 编辑器

    CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...

  4. Front End Developer Questions 前端开发人员问题(二)CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  5. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. 十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

  7. 仅以一个前端开发人员的角度看微信小程序

    看了几天的小程序(当然也包括了上手书写),才有了这篇博文,非技术贴,只是发表下个人观点,仅以个人技术能力来看小程序. 首先说下优点: 调试工具:官方的工具还是做了很多工作,包括监听文件变动自动刷新,编 ...

  8. Web前端开发人员和设计师必读文章推荐【系列十】

    <Web前端开发人员和设计师必读文章推荐系列十>给大家带来最近两个月发布在<梦想天空>的优秀文章,特别推荐给 Web 开发人员和设计师阅读.梦天空博客关注 前端开发 技术,展示 ...

  9. 10款让WEB前端开发人员更轻松的实用工具

    这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...

随机推荐

  1. calendar merge date

    calendar merge date componentDidMount () { const { monthDays, // monthDates, } = this.props; const d ...

  2. JavaScript中判断对象是否属于Array类型的4种方法及其背后的原理与局限性

    前言 毫无疑问,Array.isArray是现如今JavaScript中判断对象是否属于Array类型的首选,但是我认为了解本文其余的方法及其背后的原理与局限性也是很有必要的,因为在JavaScrip ...

  3. ROS 安装完成后运行小乌龟示例程序

    安装ROS成功后,在Beginner Tutorials中有一个简单的示例程序. 在Terminal中运行以下命令: $ roscore 新开一个terminal,运行以下命令,打开小乌龟窗口: $ ...

  4. 一次"内存泄漏"引发的血案

    本文转载自一次"内存泄漏"引发的血案 导语 2017年末,手Q春节红包项目期间,为保障活动期间服务正常稳定,我对性能不佳的Ark Server进行了改造和重写.重编发布一段时间后, ...

  5. npm与package.json快速入门

    本文转载自npm与package.json快速入门 导语 npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本 ...

  6. 阿里云linux安装nginx,亲测有效

    系统平台:CentOS release 6.6 (Final) 64位. 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtoo ...

  7. 如何将文件夹取消svn关联

    随便在什么目录新建一个文本文件,文件名随便,将文本文件打开,将下面的文字复制到文本文件中: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHI ...

  8. Linux 安装python 模块及库

    转载于https://blog.csdn.net/csdn_am/article/details/79924744 有时我们使用下载python 自带的pip 安装一些工具包时,会报如下错误 找不到满 ...

  9. keras报错:AttributeError: '_thread._local' object has no attribute 'value'

    需求是使用pyqt5中的槽函数运行keras模型训练,为了不让工具在模型训练的过程中出现假死的现象,于是把训练操作放到单独的线程中运行,于是问题来了,训练操作在主线程运行时正常,但是界面假死,假若训练 ...

  10. 500GJava/Hadoop/Spark/机器学习...视频教程免费分享 百度云持续更新

    参加工作这么长时间了,工作中遇到了不少技能都是看视频教程学习的,相比较看书而言看视频确实比较容易理解.分享一下自己看过的和收集的视频教程. 资源包括: 大数据方面的Hadoop(云帆,小象学院,八斗学 ...