Day24 - Astro Series: Add ESLint and Prettier

@ Astro

A beautiful gradient background with a title: "Add ESLint and Prettier"

Introduction

I like to use automated tools to provide error checking and formatting for a project’s code. Using ESLint and Prettier makes the code I write more consistent and error-free. I also add TypeScript checks and VSCode hints.

Packages used

Below are the packages to install and their purposes. I chose to use TypeScript and the Airbnb style config here, but you can choose settings that suit you.

Install packages

Run the following command at the project root to install all the packages mentioned above: npm install --save-dev @typescript-eslint/parser eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-astro eslint-plugin-import eslint-plugin-jsx-a11y prettier prettier-plugin-astro.

Configuration

Create an eslintrc.cjs file and place it at the project root:

module.exports = {
  extends: ['airbnb-base', 'plugin:astro/recommended', 'plugin:astro/jsx-a11y-recommended', 'prettier'],
  // ...
  overrides: [
    {
      files: ['*.astro'],
      parser: 'astro-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.astro'],
      },
      rules: {},
    },
  ],
};

Create a prettierrc.cjs file and place it at the project root, setting your preferred style options:

module.exports = {
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 120,
  bracketSpacing: true,
};

Create a settings.json file and place it in the project’s .vscode folder so VSCode knows which file types to validate when using ESLint as the formatter:

{
  "eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"]
}

Finally, you can add some NPM Script🔗 entries so you can run ESLint or Prettier manually with npm run lint or npm run prettier. Add the following two lines to package.json:

"scripts": {
  // ...
  "lint": "eslint src/**/*.{js,astro}",
  "prettier": "prettier src/**/*.{js,astro}"
}

If you are using Alias🔗, you can also install the eslint-import-resolver-alias package so ESLint recognizes alias paths and won’t report errors.

  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './src']],
        extensions: ['.astro', '.ts', '.tsx', '.js', '.jsx', '.json', '.vue'],
      },
    },
  },

This way, using @ will represent the src folder and you no longer need to write complex relative paths based on the file location!

<!-- 😎 -->
import Card from '@/components/Card.astro';
<!-- 😫 -->
import Card from '../../components/Card.astro'

Conclusion

With the above settings, the whole project now has neat formatting and helpful hints. If you have questions, you can check my example Commit🔗 in my project, or leave a comment below.

Further reading