高效实用的编程辅助神器!


2018年4月26日

高效实用的编程辅助神器!

高效实用的编程辅助神器

文/ Mario Hoyos 译/ 耷拉 来源/ freecodecamp

在技术海洋里,人家现在会推荐给你成千上万的工具,你根本不知道从哪里开始。

对相对来初起步者来说,很难从铺天盖地的信息中做出有效筛选。到头来我发现自己装了很多根本没用的扩展,这帮东西在开发周期中反而碍手碍脚。

我虽然不是专家,但随着时间的推移,我也编出了一份“超有用”工具清单。如果你刚刚开始学习如何编程,这个清单有望给你一些引导。如果你是一个经验丰富的开发人员,说不定还能从中学到些新东西。

这篇文章分成 Chrome 扩展和 VS 代码扩展两类。尽管还有其他浏览器和其他文本编辑器,但我敢打赌,大多数工具都可以用于你选择的平台,所以我们先不在个人偏好上开展辩论了。

Chrome 扩展

不管你是不是 web 开发人员,你都要用到这些扩展,某种意义上我就住在 Chrome 控制台里头。下面这一些工具,可以让你在 coding 时候少花一点时间:

WhatFont

名字就说明了一切。它可以轻松查出你心爱网站用的字体,然后借来用在自己的项目上。

装载地址:https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

Pesticide

需要看清你的

框架和修改 CSS 的时候很有用。我自己在学习盒模型时候这个东西超救命。

装载地址:https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh?hl=en

Colorzilla

用于从网站上复制精确的颜色。它会把颜色直接复制到你的剪贴板,再也不用找 RGBA 找到天荒地老了。

装载地址:https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

CSS Peeper

用于查看网站上使用的颜色和断言。刚开始的时候,直接克隆自己喜欢的网站会是个不错的练习。这个工具可以让你“偷看”他们的配色方案,并允许你查看他们页面上存在的其他断言。

装载地址:https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en

Wappalyzer

用来查看一个网站使用的技术时非常给力。想知道一个网站用的是什么框架,或者托管服务?再也不用到处找了。

装载地址:https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en

React Dev Tools

用来 debug 你的 React 应用。必须强调一点:只能用于 React 应用的编程。

装载地址:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Redux Dev Tools

用来 debug 使用 Redux 的应用。再必须强调一点:只有在执行应用里的 Redux 时才有用。

装载地址:https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

JSON Formatter

在浏览器中让 JSON 看起来更干净。你有没有瞪着一坨恶心的 JSON 三个钟头想搞清楚自己要的信息被嵌套多深?现在这个工具能把你的时间节省到两小时。

装载地址:https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en

Vimeo Repeat and Speed

用于加速 Vimeo 视频。如果你像大多数web 开发人员一样观看视频教程,你就知道 1.25 倍速播放有多爽。这个工具还有 YouTube 适用版本

装载地址:https://chrome.google.com/webstore/detail/vimeo-repeat-speed/noonakfaafcdaagngpjehilgegefdima?hl=en

VS Code 扩展

人人都有自己最爱的编辑器,我也不例外,我心爱的编辑器是 Visual Studio Code。不过我打赌以下大多数扩展,适用于你用的任何一款编辑器。来看我最爱的扩展们:

Auto Rename Tag

自动重命名成对的 HTML tag 。你创建了一个

标签,后来又想改掉它,当然还要改它结尾处那个

。有了这个工具,你只需改其中一个,另一个就会自动更新。理论上,你的工作效率提高了 2 倍。

装载地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTML CSS Support

HTML 文档的 CSS 支持。它能让你看到更整洁的语法高亮和代码建议,这样你每天被 CSS 虐到想告别编程的程度会下降到每天就那么一二三五次。

装载地址:https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

HTML Snippets

常用代码片段,另一个节省时间小妙招。把这个跟 Emmet 配对,你几乎就不用再输入任何真正的 HTML 了。

装载地址:https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

Babel ES6/ES7

给 JavaScript 的添加 Babel 语法着色。如果你在用 Babel ,这个可以让你更轻松地区分出你的代码正在搞什么。如果你喜欢玩 JavaScript 的那些先进特性,这个足够用了。

装载地址:https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

Bracket Pair Colorizer

给括号加颜色,让代码块更可视化。对付超常见 bug 的利器:因为你括号或圆括号关错了。

装载地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

ESLint

将 ESLint 集成进 VS 代码。它的方便之处在于,在你写代码的时候获得 bug 提示,基于你的配置,它还能帮你强化好的编程风格。

装载地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Guides:为代码添加额外的指导行。这是提醒你正确关闭括号的另一个视觉提示。如果你吃不准,反正我是个很依赖可视化的人。

装载地址:https://marketplace.visualstudio.com/items?itemName=spywhere.guides

JavaScript Console Utils

用于简化控制台日志。大多数开发人员都会发现自己在调试流程中登进控制台(我知道我们应该用调试器),这个实用工具能更轻松地创建有用的 console.log ()语句。

装载地址:https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils

Code Spell Checker

驼峰式拼写的拼写检查程序。Bug 的另一大来源:手太圆按岔键,拼错变量或函数名。这个拼写检查器会自动查找“不正常”的单词,并且能很好解释我们用 JavaScript 编写东西的方式。

装载地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

 Git Lens

能看清是谁在什么时候做了修改。十分便于找到应指责的合适对象,反正绝不可能是你的问题。

装载地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Path Intellisense

文件路径自动完成。从其他文件导东西进来超便捷。它使你的文件树导航变得轻而易举。

装载地址:https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Prettier

自动代码格式化程序。忘记那些手工缩进代码来帮人类看懂的日子吧。Prettier 会帮你做这个,比你自己更快更好。不能更推荐。

装载地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

VSCode-Icons

将图标添加到文件树中。如果你看着自己的文件结构感觉要瞎,这个工具会有帮助。对于你正在制作的任何文件它都有图标,使你识别眼前的东西变得容易很多。

装载地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

可能你已经拥有一组对自己的开发周期不可或缺的工具。希望上面提到的工具中能有一些可以帮你提高工作效率。不过别掉坑:在把现有工具学会之前,别急着看到什么都装,不然你会发现时间都沉没在这些事情上面了。