Eslint-config-tron

Tron"s ESLint config with TypeScript, Hooks and Prettier support.

Table of contents

• Eslint-config-tron
  • Table of contents
  • What It Does
  • How to install
  • Use in scripts
  • How Tweaking Lint Rules
  • Webstorm Setup
    • Eslint in Webstorm
    • Prettier in Webstorm
  • VS Code Setup
    • Eslint in VS Code
    • Miscellaneous plugins in VS Code (Optional)
  • License

What It Does

• Lints JavaScript and TypeScript code based on the latest standards
• Fixes issues and formatting errors with Prettier
• Lints + Fixes inside of html script tags
• Lints + Fixes TypeScript via airbnb-typescript
• Lints + Fixes React Hooks via airbnb/hooks
• You can see all the rules here.

How to install

Install eslint-config-tron and its peer dependencies :

npm install eslint-config-tron --save-dev
npx install-peerdeps --dev eslint-config-tron

and put it into your .eslintrc.js :

module.exports = {
  extends: "eslint-config-tron",
  rules: {
    // Additional, per-project rules...
  }
};

Use in scripts

You can add 2 scripts to your package.json to lint and/or fix:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},

• Now you can :
  • manually lint your code: npm run lint
  • or fix all fixable issues: npm run lint:fix

How Tweaking Lint Rules

If you'd like to overwrite eslint or prettier settings, you can add the rules in your .eslintrc file.

The ESLint rules go directly under "rules" while prettier options go under "prettier/prettier".

Note that prettier rules overwrite anything in this config (trailing comma, and single quote), so you'll need to include those as well. |

{
  "extends": [
    "eslint-config-tron"
  ],
  "rules": {
    "no-console": 2,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 120,
        "tabWidth": 8,
      }
    ]
  }
}

Webstorm Setup

Eslint in Webstorm

• Settings > Languages and Frameworks | JavaScript | ESLint:
  • Manual ESLint configuration
    • Node interpreter : Project (~/.nvm/versions/node/.../bin/node)
    • ESLint package : ~/Workspace/my-app/node_modules/eslint
  • Configuration file
    • Configuration file: /User/../Worspace/my-app/.eslintrc

If you want to lint at save :

• Settings > Tools | File watchers.
  • File type : any or tax
  • Program: $ProjectFileDir$/node_modules/.bin/eslint
  • Arguments: --fix $FilePath$
  • Output paths to refresh: $FilePath$

Prettier in Webstorm

• install prettier:

yarn add -D prettier

• Settings > Languages and Frameworks | JavaScript | Prettier
  • Node interpreter : Project (~/.nvm/versions/node/.../bin/node)
  • Prettier package: ~/Workspace/my-app/node_modules/prettier

VS Code Setup

Eslint in VS Code

VS Code will lint for you:

• Install the ESLint package
• Go in VS Code settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:

  {
  "files.associations": {
    "*.jsx": "javascriptreact"
  },
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, /* This allow fix for eslint + prettier */
    "source.fixAll": true,
    "source.organizeImports": false
  },
  "json.format.enable": true,
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
}

Miscellaneous plugins in VS Code (Optional)

• Auto Close Tag
• Auto Rename Tag
• Code Spell Checker
• Markdown All in One
• Debugger for Chrome
• ES7 React/Redux/GraphQL/React-Native snippets
• Sort lines
• TypeScript Import
• Typescript React code snippets
• markdownlint

License

Open source licensed as MIT.