@20i/eslint-config

ESLint and Prettier Config for Twenty Ideas

Usage no npm install needed!

<script type="module">
  import 20iEslintConfig from 'https://cdn.skypack.dev/@20i/eslint-config';
</script>

README

eslint-config-20i

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
  1. Create a new file .eslintrc.js in the directory of your project.
  2. Add the following code to the file.
module.exports = {
  extends: ["@20i/eslint-config"],
  parserOptions: {
    project: ["./tsconfig.eslint.json"],
  },
  ignorePatterns: [],
}

For React projects, use @20i/eslint-config/react instead.

  1. Add a special tsconfig.json file to your project: tsconfig.eslint.json to enable full type checking.
{
  // 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": [
    "**/*",
    "**/.*"
  ],
}

Configure VS Code

  1. Install the extension eslint-vscode
  2. Add the following to your .vscode/settings.json file:
  // first organize imports, then have eslint/prettier fix them
  "editor.codeActionsOnSave": ["source.organizeImports", "source.fixAll"],\

  // 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,
  },
  1. Restart VS Code

Inspired heavily by eslint-config-wesbos