[译]我希望在开始编码时就已知道的工具

在科技领域,有数千种工具可供人们使用。你怎么知道从哪里开始?

就像最近开始编码的人一样,这种倾盆大雨的信息太多了,无法筛选出来。 我发现自己安装了扩展,在我的开发周期中并没有真正帮助我,并且通常甚至阻碍了它。

我绝不是专家,但随着时间的推移,我编制了一份已证明对我非常有用的工具清单。 如果你刚刚开始学习编程,这将有望为你提供一些指导。 如果你是一位经验丰富的开发人员,希望你仍然可以学到新的东西。

我将把这篇文章分解成Chrome扩展和VS Code扩展。 我知道还有其他浏览器和其他文本编辑器,但我敢打赌大多数工具也可用于你选择的平台,所以我们不要就我们的个人偏好发起宗教般的争论。

随意跳转。

Chrome扩展

现在,我是一名自称为Web开发人员,实际上我常在Chrome控制台里。 下面是一些可以让我在那里花更少的时间的工具:

WhatFont - 名称说明了一切。 这是找出你最喜爱的网站正在使用的字体的简单方法,以便你可以借用它们来完成自己的项目。

Pesticide - 辅助查看<div>的结果并修改CSS。 当我学习盒子模型时,这简直是一个救星般的工具。

Colorzilla - 用于从网站复制精确的颜色。这会将颜色直接复制到剪贴板,因此你不用花费过多时间去获得正确的RGBA组合。

CSS Peeper - 用于查看网站上使用的颜色和资源。 一个很好的练习,特别是在开始时,会克隆出你认为看起来很酷的网站。 这使你可以查看他们的配色方案,以及页面的其他资源。

Wappalyzer - 用于查看网站上使用的技术。有没有想过网站正在使用什么样的框架或它托管的是什么服务?进去看吧。

React Dev Tools - 用于调试React应用程序。值得一提的是,这只在编写React应用程序时才有用。

Redux Dev Tools  - 适用于使用Redux调试应用程序。 值得一提的是,这只有在您的应用程序中实施Redux时才有用。

JSON Formatter  - 这是为了在浏览器中查看JSON更简洁。 你有没有在一个丑陋的JSON blob中,去找出你想要的信息是如何嵌套深度的?

Vimeo Repeat and Speed  - 用于加速Vimeo视频。 如果你像大多数网络开发人员一样观看视频教程,你就会知道如何以1.25倍的常规播放速度使用它们。 也有YouTube版本。

VS Code扩展

Visual Studio Code是我选择的编辑器。

人们喜欢他们的文本编辑,我也不例外。但是,我敢打赌,这些扩展的大部分都适用于你正在使用的任何编辑器。来看一下我最喜欢的扩展程序:

Auto Rename Tag  - 自动重命名配对的HTML标签。 你创建了一个<p>标签。 现在,你想要将其更改为其他内容,并将</ p>标记也更改为其他内容。 只需更换一个,另一个跟着改变。 从理论上讲,你的生产力提高了2倍。

HTML CSS Support  - 对HTML文档的CSS支持。这对获取一些整齐的语法高亮和代码建议非常有用。

HTML Snippets  - 有用的代码片段。这又是一个节省时间的利器。将它与Emmet配对,你几乎不用再输入实际的HTML。

Babel ES6/ES7 - 添加JavaScript Babel语法着色。如果你使用的是Babel,那么区分你的代码将更容易。如果你喜欢使用JavaScript的现代功能,这很好。

Bracket Pair Colorizer  - 在方括号中添加颜色,让它可视化。对于那些没有准确地关闭括号或圆括号的常见错误,这非常方便。

ESLint - 将ESLint集成到Visual Studio代码中。 在编写代码时,这可以方便地获得有关错误的提示,根据你的配置,它可以帮助实施良好的编码风格。

Guides - 为代码添加额外的指南。 这是另一个视觉提示,以确保你正确关闭括号。 不得不说,我是一个非常重视可视化的人。

JavaScript Console Utils  - 使控制台日志记录更简单。 如果你像大多数开发人员一样,你会发现自己在调试流程中登录到控制台(我知道我们应该使用调试器)。 此工具可以轻松创建有用的console.log()语句。

Code Spell Checker  - 拼写检查程序。 错误的另一个常见来源是胖大拇指变量或函数名称。 这个拼写检查器将寻找不常见的单词,并且善于考虑我们用JavaScript写东西的方式。

Git Lens - 让我们很容易看到是什么时候以及由谁做的修改。

Path Intellisense  - 文件路径自动补齐。 这对于从其他文件导入东西非常方便。 这也让你查看文件的树结构变得轻而易举。

 Prettier  - 自动格式化代码。 忘记你必须手动缩进代码并使其易于阅读的日子。Prettier 会比你自己做得更快,更好。 我是极力推荐它的。

VSCode-Icons - 将图标添加到文件树中。 如果看着你的文件结构伤害你的眼睛,这可能会有所帮助。 对于你使用的任何类型的文件,都有一个有用的图标,可以更轻松地区分你正在查看的内容。

总结

你可能拥有自己的一套工具,这些工具对于你的开发周期是不可或缺的。 希望上面提到的一些工具可以使你的工作流程更加高效。

不过,在学习使用已有的工具之前,不要陷入安装所有工具的陷阱,因为这可能会花太多的时间。

我鼓励你在下面的评论中留下你最喜欢的工具,这样我们都可以一起学习。

原文:Tools I wish I had known about when I started coding

版权声明:著作权归作者所有。

相关推荐

Ubuntu在终端显示Git的分支名

在Ubuntu的~/.bashrc添加代码,用于在终端显示git的分支名# 显示git分支 force_color_prompt=yes color_prompt=yes parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/' } if [ "$color_promp

你需要知道的6个Ruby数组方法

数组是编程的基本结构之一,这里介绍6个Ruby操作数组的方法。Map/Each这两种方法非常相似。 它们让我们对数组的每一项执行操作。示例:array = [1, 2, 3] effects = array.each{|x| # 根据x求值 } added = array.map

Linux使用iconv转换文本的字符编码

iconv转换文本的字符串编码:iconv -f UTF-8 -t ISO-8859-1 in.txt > out.txt 其中:-f:指出源文件的字符编码-t:指定目标文件的字符编码in.txt为输入文件,out.txt目标输出文件。

使用sdkmanager命令行工具安装Android SDK

在使用持续集成工具(如jenkins,travis ci)对android做自动部署时,我们不能像在Android Studio那样使用SDK Manager的GUI界面来安装Android SDK。这种情况下,我们需要使用android命令行工具或者sdkmanager命令行工具来管理Android SDK。这里介绍一下sdkmanager命令行

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更

iOS11固定UISearchBar在导航栏的高度

iOS 11重新设计了UISearchBar,四个角改为圆角,高度变大。在导航栏添加搜索框可能会导致导航栏高度变大,所以有必要固定UISearchBar的高度。固定搜索栏的高度为44let searchBar = UISearchBar()  //配置searchBar相关代码 navigationItem.titleView =&nbs