Remin Eslint config

Shared eslint + prettier config files for TS projects. This setup assumes that your project is primarily a TypeScript project, although JS files should work just fine too. The configs can be extended at will.

Install

Install the config in your project with required peer dependencies by running the following command:

npx install-peerdeps @reminnor/eslint-config --dev

Add config files

Add an eslint config file that extend the shared eslint config file. Like this:

# .eslintrc
{
  "extends": "@reminnor/eslint-config",
  // your overrides go here 👇
}

Also we want to extend the shared prettier config. We'll do this by importing and exporting the shared config:

# prettier.config.js
const sharedConfig = require('@reminnor/eslint-config/prettier.config.js)

module.exports = {
    ...sharedConfig,
    // your overrides go here 👇
};

Editorconfig

Add a file called .editorconfig to the root of your project with the following content:

root = true

[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
indent_style = space

[*.{ts,tsx,js,jsx,json,md,graphql,gql}]
indent_size = 2

[*.{html,twig,css,scss}]
indent_size = 4

Recommended editor setup

For a smooth workflow in VS Code, the following is recommended:

Plugins

• EditorConfig for VS Code
• ESLint
• Prettier - Code formatter
• Prettier ESLint

Configuration

Press CMD+Shift+P and find «Preferences: Open Settings (JSON)» and alter your config to include the following settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
}