Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Style / Linting

Standard

We recommend combining Prettier with the Airbnb JavaScript style guide plugins for eslint.

Maintaining stylistic consistency across TTS code helps lower the barrier to jumping in and helping with or reviewing other projects because we’ll all be familiar with reading and working with code that looks similar. Having consistent rules for styling also removes generally non-productive discussions (aka bikeshedding) around personal code-formatting preferences.

Prettier is an automatic code formatter that will handle converting between tabs and spaces, moving brackets onto the appropriate line, removing excess whitespace, and other stylistic . Using an automatic formatter makes it easier to keep code consistent while also freeing us from having to make arbitrary choices on which styles we prefer. It can integrate with your code editor to apply styles on save automatically.

eslint is our preferred tool for analyzing and flagging (aka “linting”) JavaScript that is out of line with a set of stylistic and semantic rules. There are plugins to integrate eslint with nearly every code editor and build system, as described at http://eslint.org/docs/user-guide/integrations. Using an eslint plugin with your editor makes it easier to quickly see non-conforming lines of code on the spot, as shown below:

Atom eslint plugin screenshot

Why both?

Prettier and eslint address an overlapping but different set of concerns. Prettier is just a formatter. It will adjust your whitespace, add or remove parentheses, add semicolons, etc., but it has nothing to say about the semantics of your code. eslint, meanwhile, parsers your code into an abstract syntax tree to fully understand what it’s doing and warns you about unusual patterns and common errors. For example, it can tell you if you reference an undefined variable, define a variable that never gets used, and even warn you about accessibility issues such as leaving an alt attribute out of <img> tags in JSX.

How to set it up

Prettier has a few configurable options. Generally we recommend going with its defaults for simplicity, but the important thing is to pick something and use it consistently.

eslint is configured with rules, but rather than write all our own rules we recommend using the rules defined by the Airbnb Javascript style guide and Prettier. Both Prettier and Airbnb provide their rules as sets of npm modules, depending on your needs:

Each link above has instructions for installing the required npm packages and configuring eslint to use the installed rules. These should be installed for each project, and saved in each project’s package.json.

Generally the process is to npm install the required modules and peer dependencies, for example:

npm install --save-dev \
  eslint \
  eslint-config-airbnb \
  eslint-plugin-jsx-a11y \
  eslint-plugin-import \
  eslint-plugin-react

and then create a local file configuration within your project called .eslintrc.json that looks like:

{
  "extends": ["airbnb", "prettier"]
}

For more information on configuring eslint, see its documentation at http://eslint.org/docs/user-guide/configuring.