Skip to content

Commit

Permalink
ESLint TypeScript Configuration Package (#20)
Browse files Browse the repository at this point in the history 
To support projects build with TypeScript (1), a new
`@arcticicestudio/eslint-config-typescript` package has been implemented
using the awesome @typescript-eslint (2) project. It will mainly extend
`@typescript-eslint/eslint-plugin`'s already provided and recommended
configurations (3) in order to adapt best practices:

1. `plugin:@typescript-eslint/eslint-recommended`
2. `plugin:@typescript-eslint/recommended`
3. `plugin:@typescript-eslint/recommended-requiring-type-checking`

The `@typescript-eslint/parser` (4) is set as ESLint parser.
Also as of `@typescript-eslint/parser` version `2.0.0` (5) (also see
typescript-eslint/typescript-eslint#890 (6)), the parser will panic when
parsing files that are not included within the provided tsconfig(s).
The package documentation contains instructions and a quick setup and
usage guide to inform about the required `tsconfig` configurations (7)
and the corresponding `eslintrc` changes.

Next to the support for TypeScript, the package also modifies some React
and import related rules in order to prevent conflicts, like the
adaption of the `.ts` and `.tsx` extensions for all JS and JSX files as
well as removing `.jsx` to force the usage of `.tsx`.
There are other rules that have been disabled like the check for valid
React `prop-types` since these and not necessary anymore when working
with TypeScript.

The new package provides two entry points, available as
`@arcticicestudio/eslint-config-typescript` (main) and
`@arcticicestudio/eslint-config-typescript/prettier` that can both be
composed with all other available entry points (8) to inherit their
rules.

This package mainly depends on the
`@typescript-eslint/eslint-plugin@^2.0.0` and
`@typescript-eslint/parser@^2.0.0` packages as peer dependencies.

References:
  (1) https://www.typescriptlang.org
  (2) https://github.com/typescript-eslint/typescript-eslint
  (3) https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/src/configs
  (4) https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser
  (5) https://github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0
  (6) typescript-eslint/typescript-eslint#890
  (7) https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
  (8)  https://github.com/arcticicestudio/styleguide-javascript/blob/develop/packages/%40arcticicestudio/eslint-config/README.md#entry-points

Resolves GH-19
  • Loading branch information
@arcticicestudio
arcticicestudio authored Aug 20, 2019
1 parent 833cc51 commit 484c981
Show file tree
Hide file tree
Showing 19 changed files with 13,779 additions and 30 deletions.
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<p align="center"><a href="https://github.com/arcticicestudio/styleguide-javascript/releases/latest" target="_blank"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-javascript.svg?style=flat-square&label=Release&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a> <a href="https://arcticicestudio.github.io/styleguide-javascript" target="_blank"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-javascript.svg?style=flat-square&label=Docs&logo=read-the-docs&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a> <a href="https://github.com/arcticicestudio/styleguide-javascript/blob/develop/CHANGELOG.md" target="_blank"><img src="https://img.shields.io/github/release/arcticicestudio/styleguide-javascript.svg?style=flat-square&label=Changelog&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/></a></p>

<p align="center"><a href="https://www.npmjs.com/package/@arcticicestudio/eslint-config" target="_blank"><img src="https://img.shields.io/npm/v/@arcticicestudio/eslint-config.svg?style=flat-square&label=@arcticicestudio/eslint-config&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a> <a href="https://www.npmjs.com/package/@arcticicestudio/eslint-config-base" target="_blank"><img src="https://img.shields.io/npm/v/@arcticicestudio/eslint-config-base.svg?style=flat-square&label=@arcticicestudio/eslint-config-base&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a></p>
<p align="center"><a href="https://www.npmjs.com/package/@arcticicestudio/eslint-config" target="_blank"><img src="https://img.shields.io/npm/v/@arcticicestudio/eslint-config.svg?style=flat-square&label=@arcticicestudio/eslint-config&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a> <a href="https://www.npmjs.com/package/@arcticicestudio/eslint-config-base" target="_blank"><img src="https://img.shields.io/npm/v/@arcticicestudio/eslint-config-base.svg?style=flat-square&label=@arcticicestudio/eslint-config-base&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a> <a href="https://www.npmjs.com/package/@arcticicestudio/eslint-config-typescript" target="_blank"><img src="https://img.shields.io/npm/v/@arcticicestudio/eslint-config-typescript.svg?style=flat-square&label=@arcticicestudio/eslint-config-typescript&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K"/></a> </p>

<p align="center"><a href="https://circleci.com/gh/arcticicestudio/styleguide-javascript" target="_blank"><img src="https://img.shields.io/circleci/project/github/arcticicestudio/styleguide-javascript/develop.svg?style=flat-square&label=Build&logo=circleci&logoColor=eceff4&colorA=4c566a"/></a></p>

Expand All @@ -20,6 +20,8 @@ The [project documentation][docs] contains chapters to learn about the [comprehe

To follow these rules in a project use the official extensible code linter configurations [@arcticicestudio/eslint-config-base][gh-t-pkg-esl-conf-base] for [ESLint][eslint]. The advanced [@arcticicestudio/eslint-config][gh-t-pkg-esl-conf] package provides support for specific [React][] and [JSX A11Y][npm-eslint-plugin-jsx-a11y] rules as well as compatibility integrations for other projects like [Prettier][].

To lint projects build with [TypeScript][], the [@arcticicestudio/eslint-config-typescript][gh-t-pkg-esl-ts] package can be extended for full compatibility with the TypeScript compiler in combination with the powerful ESLint engine. It also allows to lint mixed projects consisting of both TypeScript and JavaScript sources.

## Contributing

Read the [contributing guide][gh-b-contrib] to learn about the development process and how to propose [enhancement suggestions][gh-b-contrib#enhance] and [report bugs][gh-b-contrib#bug], how to [submit pull requests][gh-b-contrib#pr] and the project's [styleguides][gh-b-contrib#stgs], [branch organization][gh-b-contrib#vcs] and [versioning][gh-b-contrib#ver] model.
Expand Down Expand Up @@ -52,6 +54,8 @@ The guide also includes information about [minimal, complete, and verifiable exa
[gh-b-contrib#ver]: https://github.com/arcticicestudio/styleguide-javascript/blob/develop/CONTRIBUTING.md#versioning
[gh-t-pkg-esl-conf-base]: https://github.com/arcticicestudio/styleguide-javascript/tree/develop/packages/@arcticicestudio/eslint-config-base
[gh-t-pkg-esl-conf]: https://github.com/arcticicestudio/styleguide-javascript/tree/develop/packages/@arcticicestudio/eslint-config
[gh-t-pkg-esl-ts]: https://github.com/arcticicestudio/styleguide-javascript/tree/develop/packages/@arcticicestudio/eslint-config-typescript
[npm-eslint-plugin-jsx-a11y]: https://www.npmjs.com/package/eslint-plugin-jsx-a11y
[prettier]: https://prettier.io
[react]: https://reactjs.org
[typescript]: https://www.typescriptlang.org
Loading

0 comments on commit 484c981

Please sign in to comment.