一些文本编辑器的实用技巧和经验分享 已翻译 100%

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. 

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

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”.

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

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

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

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

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

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.