![](\"../../.github/assets/eslint-config.png\")
\n\n \n
\n Ascend's ESLint config for writing clean consistent code in Typescript projects 👌\n
\n![\"NPM](\"https://img.shields.io/npm/v/@ascend-innovations/eslint-config-ts.svg\")
![\"PRs](\"https://img.shields.io/badge/PRs-welcome-orange.svg\"){kind=icon}
\n\n## Current Support\n\nCurrently this package provides Typescript configurations for:\n\n- Typescript vanilla JS\n- Typescript React\n- Typescript Svelte\n- Typescript Node\n- Typescript Jest\n\n## Non-Typescript Rule Definitions\n\nThis package extends all of the rules defined in our core `eslint-config` package, [`@ascend-innovations/eslint-config`](https://www.npmjs.com/package/@ascend-innovations/eslint-config). The only difference is that it adds overrides that define rules & handling for typescript files.\n\n## Installing\n\n1. Put a `.eslintrc` (or any [valid eslint config file](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats)) in your project root\n2. You can alternatively put the config in your `package.json` under the property `\"eslintConfig\"`:. This makes one less file in your project.\n3. Be sure your to have a valid `tsconfig.json` configured for your project.\n4. Install dependencies and select the configuration you want (available configs listed below)\n\n### Default Vanilla JS Configuration\n\nThe default install will install all required _AND_ optional dependencies. You can safely remove the following packages without triggering a peer dependency warning if you aren't consuming the associated configs:\n\n- `react`\n - `eslint-config-airbnb`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, `eslint-plugin-jsx-a11y`\n- `jest`\n - `eslint-plugin-jest`\n- `svelte`\n - `eslint-plugin-svelte3`\n\n_Install it with NPM:_ `npx install-peerdeps --dev @ascend-innovations/eslint-config-ts`\\\n_Install it with Yarn:_ `npx install-peerdeps --dev @ascend-innovations/eslint-config-ts -Y`\\\n_Use it:_\n\n```\n{\n \"extends\": [\n \"@ascend-innovations/eslint-config-ts\"\n ]\n}\n```\n\n_Notes:_\n\n- This install will install optional peer dependencies as well. If you aren't using `react` or `jest`, you can remove the following packages without triggering a peer dependency warning:\n - `eslint-config-airbnb`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, `eslint-plugin-jsx-a11y`\n- Extends [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)\n- Prettier is always on (configured & enabled by default)\n\n### React Configuration\n\n_Use it:_\n\n```\n{\n \"extends\": [\n \"@ascend-innovations/eslint-config-ts/react\"\n ]\n}\n```\n\n_Notes:_\n\n- Extends [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)\n\n### Svelte Configuration\n\n_Use it:_\nSvelte is a bit finicky with linting setups, so we keep Svelte stuff in it's own config to apply on top of the root config.\nThis gives us greater control and makes debugging easier.\n\n```\n{\n \"extends\": [\n \"@ascend-innovations/eslint-config-ts\",\n \"@ascend-innovations/eslint-config-ts/svelte\"\n ]\n}\n```\n\n### Node Configuration\n\n_Use it:_\n\n```\n{\n \"extends\": [\n \"@ascend-innovations/eslint-config-ts/node\"\n ]\n}\n```\n\n_Notes:_\n\n- Extends [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)\n\n### Add Jest Support\n\nYou can add Jest support to any project:\n\n```\n{\n \"extends\": [\n \"@ascend-innovations/eslint-config-ts/jest\"\n ]\n}\n```\n\n## Set Up Project Lint Scripts\n\nAdd two scripts to your package.json to lint and/or fix:\n\n_Non-React projects:_\n\n```\n\"scripts\": {\n \"lint\": \"eslint . --ext .js,.ts\",\n \"lint:fix\": \"eslint . --ext .js,.ts --fix\"\n},\n```\n\n_React projects:_\n\n```\n\"scripts\": {\n \"lint\": \"eslint . --ext .js,.ts,.jsx,.tsx\",\n \"lint:fix\": \"eslint . --ext .js,.ts,.jsx,.tsx --fix\"\n},\n```\n\nNow you can manually lint your code by running `npm run lint` and fix all fixable issues with `npm run lint:fix`.\n\n## With VS Code\n\nWe highly recommend configuring your editor to do this automatically on file save across your whole project.\n\n1. Install the [ESLint plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n2. Create a file in your current project in `.vscode/settings.json`.\n3. Place the following configuration in the file:\n\n```\n{\n // show eslint icon at bottom toolbar\n \"eslint.alwaysShowStatus\": true,\n\n //\n // Auto-run code formatting on save\n //\n \"editor.formatOnSave\": true,\n\n // Tell the ESLint plugin to run on save\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n },\n\n // The following prevents linting from running twice\n // turn it off for JS and JSX, we will do this via eslint\n \"[javascript]\": {\n \"editor.formatOnSave\": false\n },\n \"[javascriptreact]\": {\n \"editor.formatOnSave\": false\n },\n // Turn it off for TS & TSX\n \"[typescript]\": {\n \"editor.formatOnSave\": false\n },\n \"[typescriptreact]\": {\n \"editor.formatOnSave\": false\n },\n \"[svelte]\": {\n \"editor.formatOnSave\": false\n },\n\n}\n```\n\n4. In order to ensure there are no conflicts between Prettier and ESLint with any plugins you may have active in your VSCode editor, we also recommend adding a file at `.vscode/extensions.json` with the following content:\n\n```\n{\n // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.\n // List of extensions which should be recommended for users of this workspace.\n \"recommendations\": [\n \"dbaeumer.vscode-eslint\"\n ],\n // List of extensions recommended by VS Code that should not be recommended for users of this workspace.\n \"unwantedRecommendations\": [\n \"esbenp.prettier-vscode\", // You don't need the prettier extension with this setup\n \"editorconfig.editorconfig\", // You don't need editor config with this setup\n ]\n}\n```\n\nThis will make sure that anyone working on the project is aware of enabling/disabling proper extensions!\n","readmeFilename":"README.md"}