/eslint-config-tron

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

Primary LanguageJavaScriptMIT LicenseMIT

Eslint-config-tron

npm version License

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

Table of contents

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)

License

Open source licensed as MIT.