🔥 Efficient workflow with ESLint and PrettierJun 1, 2021Code formatting 527 words

I have a few tools which I use consistently across JavaScript projects I work on. ESLint and Prettier are in the top 5. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a good shape. This way I don’t have to worry about code formatting anymore.

Trulli
Code Quality, xkcd

In this post, I’ll share some of the plugins and config I use to enforce a standard style guide.

The Plugins

Following are the plugins which I recommend:

For projects which use React, (like Gatsby and Next.js)

The Config

I use .prettierrc.js and .eslintrc.js to manage configurations for JavaScript based projects.

// prettier.config.js or .prettierrc.js
module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  jsxSingleQuote: true,
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
};

The prettier config is self-explanatory. Visit the docs if you wanna know all the options prettier provides.

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'testing-library'],
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      alias: {
        map: [
          ['@/components', './src/components/'],
          ['@/services', './src/services/'],
          ['@/context', './src/context/'],
          ['@/utils', './src/utils/'],
        ],
        extensions: ['.js', '.jsx'],
      },
    },
  },
  rules: {
    // NextJs specific fix: suppress errors for missing 'import React' in files for nextjs
    'react/react-in-jsx-scope': 'off',
    // ignore prop types valdation,
    'react/prop-types': 'off',
    // NextJs specific fix: allow jsx syntax in js files,
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], // should add ".ts" if typescript project
    // error out formatting not matching prettier rule
    'prettier/prettier': ['error', { singleQuote: true }],
  },
};

Couple of note-worthy things here:

  • I use airbnb standard linting rules, and override rules specific to the project I work on in the rules section
  • The import/resolver setting is to map the path alias and let the linter know that it’s a valid path, else you’ll get Unable to resolve path to module 'xyz' (import/no-unresolved) error.

I also use a jsconfig.json to avoid the import path hell. So instead of importing something from ../../../components/Button, I simply write @/components/Button. And this works on any level of nested folders.

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/components/*": [
        "./components/*"
      ],
      "@/services/*": [
        "./services/*"
      ],
      "@/context/*": [
        "./context/*"
      ],
      "@/utils/*": [
        "./utils/*"
      ]
    }
  }
}

I like to keep all files neatly tucked in the src folder, hence the baseUrl: "src". After that, for each folder, I add an alias prefixed with @/.

I follow the naming convention of @/ to denote package is from a local directory and not an installed module.

Bonus: VSCode Settings

I am a Webstorm user. But I do use VSCode when I want to do a quick PR review, or some minor tasks which doesn’t require a full-blown IDE.

In order to get Prettier, ESLint and VSCode to behave properly with each other, I modify a couple of VSCode settings.

// settings.json
{
  "files.autoSave": "onWindowChange",
  "editor.formatOnSaveMode": "modifications",
  "editor.formatOnSave": true,
  "[javascript, javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

The configurations translate to:

  • Auto Save when VSCode window loses focus, i.e I switch to another window.
  • When the file is saved, apply formatting only to the modified lines instead of the entire file.
  • Format the file when the file is saved.
  • Use Prettier Extension to format JavaScript files.

That’s it. The configuration files for Prettier and ESLint can be adjusted to your needs. Prettier provides just a handful of configuration to work with, but ESLint leaves everything upto you. You can start from scratch, or use configurations from standards like airbnb and adjust the rules as per your needs.

Code Quality from xkcd
Code Quality 3, xkcd

Let me know in the comments below, what style-guide do you enforce on your projects?