3.2.0 • Published 1 month ago

@20i/eslint-config v3.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 month ago

eslint-config-20i

publish npm (scoped)

Auto Install

Use mrm to install all dependencies and add config files.

npx mrm eslint --preset @20i/mrm-preset

Manual Install

  1. Install dev dependencies:

    yarn add -D eslint prettier typescript @20i/eslint-config
    # or
    npm i -D eslint prettier typescript @20i/eslint-config
  2. Create a new file, .eslintrc.js, in the directory of your project.

  3. Add the following code to the file.

    module.exports = {
      extends: ["@20i/eslint-config"],
      parserOptions: {
        project: ["./tsconfig.eslint.json"],
      },
      ignorePatterns: [],
    }

    ⚠️ For React projects, set @20i/eslint-config/react instead.

  4. Add a special tsconfig.json file to your project: tsconfig.eslint.json

    {
      // extend your base config to share compilerOptions, etc
      "extends": "./tsconfig.json",
      "compilerOptions": {
        // ensure that nobody can accidentally use this config for a build
        "noEmit": true
      },
      "include": [
        "**/*",
        "**/.*"
      ],
    }
  5. Add the following to your .prettierrc file:

    {
      "endOfLine": "auto",
      "semi": false,
      "trailingComma": "es5"
    }

Configure VS Code

  1. Make sure these extensions are installed:

    • ESlint
    • Prettier - Code formatter
    • Install from the links above or via terminal:

      code --install-extension dbaeumer.vscode-eslint && \
      code --install-extension esbenp.prettier-vscode
  2. Add the following to your global ~/.vscode/settings.json file:

    {
      "editor.codeActionsOnSave": {
        "source.fixAll": true
      },
      // format on save for everything, but what prettier will handle through eslint
      "editor.formatOnSave": true,
      "[javascriptreact]": {
        "editor.formatOnSave": false,
      },
      "[javascript]": {
        "editor.formatOnSave": false,
      },
      "[typescript]": {
        "editor.formatOnSave": false,
      },
      "[typescriptreact]": {
        "editor.formatOnSave": false,
      },
    }
  3. Restart VS Code

References

Inspired heavily by eslint-config-wesbos