Jon Preece

Follow DeveloperHandbook.com on TwitterJon Preece
Jan 22, 2019 · 4 minute read

How you set up your development environment can be a very contentious topic, a religious argument in which there may not be one single unified answer, but rather many correct answers.

In this post I will discuss exactly how I configure my coding environment.

Throughout this post I dicuss tools like ESLint and Prettier several times. Should you like to learn about these tools in more detail, I have written a separate, more detailed, blog post on the topic. How I use ESLint and Prettier for a consistent coding environment.

Strictly speaking, none of this is required, you can get along just fine by ignoring all the advice in this post. If you want consistency, linting, formatting and visual goodness, keep on reading.

VS Code is my primary editor for front-end development

I use VS Code for all front-end development, and I love it. I have found no better tool.

VS Code Extensions
VS Code Extensions

I highly recommend installing at least the following extensions;

I do have several other extensions installed, which you can see in the screenshot above. These are more optional, but still recommended. I use all of them.

Should you choose to install Prettier, I recommend turning on Format On Save, as follows;

  • In VS Code, click Main Menu > Preferences > Settings.
  • In Search settings, type Format On Save
  • Ensure option is selected as shown

VS Code Format On Save
VS Code Format On Save

If you are choosing to use another editor, I recommend finding similar extensions as those mentioned above.

TL;DR

Next I am going to explain how specifically I configure my React projects. This is all well and good, but by no means vital to getting started.

I created an absolute bare-bones starter project that contains everything discussed below (and nothing else). You can find it on GitHub, default-project-setup.

ESLint

ESLint is an open source JavaScript linting utility. Linting is the process of running a program that will analyse code for potential errors as well as code that does not adhere to the preferred style.

Here is our ESLint starting point;

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "env": {
    "browser": true
  },
  "extends": ["airbnb", "prettier"],
  "rules": {
    "react/prop-types": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js"] }]
  }
}

Add this to your .eslintrc file. We will make adjustments here as we go along.

You will need to run the following command to add ESLint to your project;

npm install --save-dev babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-config-import eslint-config-jsx-a11y eslint-config-node eslint-config-prettier eslint-config-promise eslint-config-react prettier stylelint stylelint-config-standard

We make use of Airbnb’s styleguide, with a couple of React specific overrides.

Prettier

Prettier is an opinionated code formatter. Prettier takes your code, moves it around, and “tidies” it up in a standard way. A way that has been agreed by those in the open source community.

I use Prettier as-is, with a single override.

{
  "printWidth": 90,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

I have changed the printWidth from 80 to 90, as i prefer how the code gets formatted at the slightly wider width.

Create a .prettierrc file as above.

Stylelint

Stylelint is like ESLint and Prettier for SCSS/CSS. I love how Stylelint tidies and organises my CSS/SCSS automatically so I do not have to think about it.

I use stylelint-config-standard for all my projects and I never override it.

{
  "extends": "stylelint-config-standard"
}

Add the above to .stylelintrc.

EditorConfig

EditorConfig helps with consistency as I move around between projects, computers and share code with other team members.

This is my preferred EditorConfig setup;

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null

Add the above to .editorconfig.

Summary

How editors/environments are configured can be a contentious topic. I lay out the groundwork for you, and you are free to change the style to suit your own personal needs. I primarily use VS Code for development, with ESLint, Prettier and EditorConfig for linting, formatting and consistency between environments.

ReactJavaScript

Edit this page on GitHub
Jon Preece

About the author

I am Jon Preece, an experienced website and software developer from the United Kingdom, based in Manchester.

Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy. Get in touch via Twitter.