Over six internships, I’ve had lots of lovely mentors who have watched me code and let me watch them code. (I love pair programming!) Thanks to them, there are lots of things I’ve learned on the job that have made my work more efficient and enjoyable.

Some of these things are text editor tips and tricks, and I want to share some of what I’ve learned with you!

This is not a blog post about which text editor you should use. I’ll be sharing some examples in the editor I use these days (Sublime Text on a Mac) — but many text editors are customizable. That means that many of these tips & tricks can be probably be set up in your editor (and I’d love to see comments explaining how!) Let’s get rid of the “this tool is the best” discourse, and just learn how to help our tools help us better. 



这不是一篇关于你应该使用哪个文本编辑器的博客。我会分享一些这些天我使用过的编辑器的示例(Mac 系统上的 Sublime Text )—— 但很多文本编辑器是可定制的。这就意味着这些技巧&窍门中的很多都可以在你的编辑器中设置(我很想在评论里看到解释该怎么做)。让我们抛开“这个工具是最好的”的话题,只是学习怎样让我们的工具更好的帮助我们。

Automatically lint your code

Linters can be great for making code cleaner and easier to read, and for catching mistakes. Sometimes I run a linter after I finish a set of changes, or let a linter run online after I open a pull request on GitHub. But I got much faster at writing linter-passing code when the linter ran… as I wrote my code! I have not only stopped making boring tweaks for several minutes before submitting code. I’m also now training myself to fix issues before they even happen.

The linter tells me right away: a variable is undefined, and I’m missing a semicolon


检测器可以让代码更清晰,更容易阅读,和更找到错误。有时我在完成一些改变后,运行检测器,或者在 GitHub上 打开一个 pull 请求后,让检测器在线运行。但是当检测器运行时,我写检测通过的代码变的更快了....就像我在写我的代码。我不仅停止了在提交代码之前几分钟枯燥的调整,还训练我自己在事情发生之前就解决问题的习惯。


80 character ruler

Speaking of arbitrary rules, lots of style guides like lines to be at most 80 characters long (or 100, or something else). Most text editors have a way to add a little line to remind you when you’re at that limit, whatever it is.

In Sublime Text, you can turn this on from View > Ruler

Automatically follow some whitespace conventions

A lot of style guides prefer files to have no trailing whitespace and exactly one new line at the end of each file. It can be hard to remember to do this, so it’s nice when my text editor does it for me! Sublime has this in its user settings: “ensure_newline_at_eof_on_save” and “trim_trailing_white_space_on_save”.



在 Sublime Text ,你可以从 View > Ruler 开启该功能


许多风格指南偏向于在文件结尾处没有空格,和在每个文件的结尾有一个新行。平常很难记住要这样做,但幸好我的文本编辑器能帮我做这些!Sublime 在它的用户设置中有 “ensure_newline_at_eof_on_save”  和 “trim_trailing_white_space_on_save”。

Search (and replace) over the whole codebase

When I’m dealing with a codebase of many files, it’s nice to search within it to see all the places something is used or referred to (⌘ shift F on MacOS in Sublime). It’s extra awesome to have the option to search specifically within a certain folder or file type. Sometimes I find it helpful to turn case sensitivity on/off or to use regular expressions — though I don’t use those features often.

Quickly find function definitions

Sure, I could search through the codebase for a function name, find its definition, and then figure out how it works. But wouldn’t it be nice to have a way to get there faster?

right click, goto definition, and …aha! that’s what that does


当我处理一个代码库中的许多文件时,在里面搜索可以看到所有被使用或被引用的地方 ( MacOS 的 Sublime 用 ⌘ shift F ),这非常好。可以选择在特定的文件夹或文件类型中进行搜索,这非常棒。有时候我觉得打开/关闭区分大小写或使用正则表达式是很有帮助的--尽管我不经常使用这些功能。



右击,  goto definition , 然后……哈哈! 结果就出来了。

Quickly find files

I often want to find and open a file but don’t remember where exactly it is in the codebase. I love being able to enter the filename in a search bar and see all possible files I am looking for, which lets me open new files quickly. I love the added bonus of a really flexible search input. I can make a whole bunch of typos or leave out parts of the filename and Sublime still can figure out what I want! (I bet the tech behind that search algorithm, often called “fuzzy search”, is pretty interesting!)

In Sublime Text, you can bring up this search bar with ⌘P


我经常需要查找并打开一个文件,但并不记得它在代码库的精确位置。所以我希望能够在查找栏中输入文件名,且能看到我正查找的所有可能(符合)的文件,让我快速地打开新的文件。我喜欢灵活的搜索输入所带来的额外益处。我甚至可以弄一堆的拼写错误或删掉文件名的一部分,Sublime 依然可以知道我想要什么!(我敢打赌这搜索算法背后通常被称为“模糊搜索”的技术,是相当有趣的!)

在 Sublime Text, 你可以用 ⌘P 调出这个搜索栏

Move line(s) up and down

To move a line of code (or a whole function) below another, I used to use a lot of select + copy + paste. I’ve since figured out how to move lines up and down with a shortcut. It’s a small change, but I find it feels so much nicer (kinda like how amazing three finger drag feels).

control+ ⌘ + up/down (on MacOS) in Sublime Text



MacOS 的 Sublime Text 可使用 control+ ⌘ + up/down

Syntax highlighting

Syntax highlighting makes reading and scanning code much easier. But it also helps catch mistakes as they’re being typed — if it doesn’t look like it’s colored right, it might be a mistake.

Sometimes syntax is highlighted by default. Sometimes only certain languages/technologies are in your default settings. I got a new work laptop and knew I needed to install a package to get jsx highlighting. Yet I still procrastinated it for a few months while working with many jsx files. After I took a minute to install it, things got so much better.

Before and after adding syntax highlighting for React .jsx files



有时语法默认为高亮显示的,有时只有某些语言/技术在你的默认设置里。当我得到一台新的工作笔记本,我知道我需要去安装一个包才能得到 jsx 的语法高亮。然而,在处理许多 jsx 文件时,我仍然拖了好几个月的时间(都还没安装)。最后我花了一分钟安装了它,事情变得更好了。

为 React .jsx 文件添加语法高亮的前后对比

Git stuff

Lastly, if you use git in your workflow, you can add some support to your text editor to tell you git-related things. One thing I like to see is what lines have been added/deleted/modified since my last commit (a lightweight git diff). I also sometimes use a tool (built around the poorly named git blame) to see who last changed a line in a file.

the markers in the left margins are thanks to the GitGutter package

Git stuff

最后,如果你在你的工作流程中有使用到 git ,你可以在你的文本编辑器中添加一些支持来告诉你一些 git 相关的东西。我喜欢看到的一件事就是从我上次提交以来所增加/删除/修改的行(一个轻量级的 git diff )。我有时也使用工具(糟糕的名字 git blame ,找背锅的)去查看是谁最后在文件中更改了一行。

标记显示在左边要感谢 gitgutter 包

And more!

There are lots of cool things your text editor can do for you! I’m sure I’ll continue to learn about tools that will help me be more efficient and help my work be more enjoyable. And I don’t plan on starting to use them all at once — over time I will pick and choose tools as I get excited about them or find the need for them.

Hopefully some of these tips & tricks were exciting or helpful to you! I’d love to hear in the comments about what sorts of text editor features you love to use. 


你的文本编辑器可以为你做很多很酷的事情! 我相信持续学习这些工具有助于更高效,更开心地工作。 另外我不打算第一时间开始使用这些工具,而是在长期的过程中做选择,比如为它们感到兴奋,或者满足我需求时再做选择。