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

We recommend adhering to the Airbnb JavaScript style guide.

Maintaining stylistic consistency across 18F’s 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.

eslint is our preferred tool for analyzing and flagging (aka “linting”) JavaScript that is out of line with a set of stylistic 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

Airbnb provides npm packages of eslint rules that implement their style guide.

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:

# These version numbers will change so please follow the instructions at the
# linked packages for up-to-date instructions.
npm install --save-dev eslint@3.15.0 eslint-config-airbnb eslint-plugin-jsx-a11y@3.0.2 \
  eslint-plugin-import@2.2.0 eslint-plugin-react@6.9.0

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

{
  "extends": "airbnb"
}

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