Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ESLint #15

Closed
14 tasks done
arcticicestudio opened this issue Nov 16, 2018 · 0 comments
Closed
14 tasks done

ESLint #15

arcticicestudio opened this issue Nov 16, 2018 · 0 comments
Labels
context-workflow scope-maintainability scope-performance scope-stability type-feature
Milestone
0.1.0

Comments

@arcticicestudio
Copy link
Contributor

arcticicestudio commented Nov 16, 2018 •
edited
Loading

Must be resolved before #16

Integrate ESLint, the pluggable and de-facto standard linting utility for JavaScript.

Configuration Preset

The configuration preset that will be used is eslint-config-arcticicestudio which implements the Arctic Ice Studio JavaScript Style. It it built on top of eslint-config-arcticicestudio-base and includes various rules of the following plugins:

Since the custom preset is still in major version 0 note that the version range should be >=0.x.x <1.0.0 to avoid NPM's “SemVer Major Zero Caveat”. When defining package versions with the the carat ^ or tilde ~ range selector it won't affect packages with a major version of 0. NPM will resolve these packages to their exact version until the major version is greater or equal to 1.
To avoid this caveat the more detailed version range >=0.x.x <1.0.0 should be used to resolve all versions greater or equal to 0.x.x but less than 1.0.0. This will always use the latest 0.x.x version and removes the need to increment the version manually on each new release.

To allow to lint all valid Babel code babel-eslint will be included and specified as main parser. Also to make use of the latest experimental Babel features and proposals eslint-plugin-babel will be added:

  • babel/camelcase with level error - doesn't complain about optional chaining (let foo = bar?.a_b;). Note that the core rule camelcase must be disabled!
  • babel/no-unused-expressions with level error - doesn't fail when using do expressions or optional chaining (a?.b()). Note that the core rule no-unused-expressions must be disabled!

See the documentation of provided rulesand required configurations to use them.

The .eslintrc.js configuration file will be placed in the project root next to the .eslintignore file to define ignore pattern. Initially it will specify the environments which define global variables that are predefined:

  • browser - browser global variables.
  • node - Node.js global variables and Node.js scoping.

Webpack preparations

To prepare for a better developer experience with Webpack (that will be used later on through Gatsby) the resolvers of the eslint-plugin-import will be configured for the src and src/components paths.

Disabled rules

Due to compatibility problems and message noise the no-confusing-arrow rule will be disabled. It can be re-enabled again when the used preset handles the problem or disables the rule too.

Also to suppress errors in the future with Gatsby the import/no-extraneous-dependencies will also be overridden (still error level) by adding the devDependencies option and add the exception for ./.gatsby/**/*.js. This allows to use development dependencies in Gatsby configuration files without linting errors since these are necessary and some will be provided by Gatsby itself without being explicitly added to the package.json.

npm script/task

To allow to run the JavaScript linting separately a lint:js npm script/task will be added to be included in the main lint script flow. To use the great auto-fixing feature another format:js script/task will be added.

Tasks
@arcticicestudio arcticicestudio added this to the 0.1.0 milestone Nov 16, 2018
@arcticicestudio arcticicestudio self-assigned this Nov 16, 2018
This was referenced Nov 16, 2018
Closed
Closed
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Install required ESLint packages
864518c 
Installed all requireded packages (`devDependencies`):

- babel-eslint
- eslint
- eslint-config-arcticicestudio
- eslint-plugin-babel
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react

>>> Configuration Preset

The eslint-config-arcticicestudio (1) configuration preset implements
the Arctic Ice Studio JavaScript Style (2). It it built on top of
eslint-config-arcticicestudio-base (3) and includes various rules of the
following plugins:

- eslint-plugin-import (4)
- eslint-plugin-jsx-a11y (5)
- eslint-plugin-react (6)

Since the custom preset is still in major version `0` note that the
version range is `>=0.x.x <1.0.0` to avoid NPM's  "SemVer Major Zero
Caveat". When defining package versions with the the carat `^` or tilde
`~` range selector it won't affect packages with a major version of `0`.
NPM will resolve these packages to their exact version until the major
version is greater or equal to `1`.
To avoid this caveat the more detailed version range `>=0.x.x <1.0.0` is
used to resolve all versions greater or equal to `0.x.x` but less than
`1.0.0`. This will always use the latest `0.x.x` version and removes the
need to increment the version manually on each new release.

To allow to lint all valid Babel code babel-eslint (7) will be included
and specified as main parser (8). Also to make use of the latest Babel
features and proposals eslint-plugin-babel (9) has been added.

References:

  (1) https://github.com/arcticicestudio/eslint-config-arcticicestudio
  (2) https://arcticicestudio.github.io/styleguide-javascript
  (3) https://github.com/arcticicestudio/eslint-config-arcticicestudio-base
  (4) https://github.com/benmosher/eslint-plugin-import
  (5) https://github.com/evcohen/eslint-plugin-jsx-a11y
  (6) https://github.com/evcohen/eslint-plugin-react
  (7) https://github.com/babel/babel-eslint
  (8) https://eslint.org/docs/user-guide/configuring#specifying-parser
  (9) https://github.com/babel/eslint-plugin-babel

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Initial implementation of the ESLint config and ignore pattern
cf849a8 
The `.eslintrc.js` configuration file has been placed in the project
root next to the `.eslintignore` file that defines the ignore pattern.
It specifies the environments (1) which define global variables that
are predefined:

- `browser` - browser global variables.
- `node` - Node.js global variables and Node.js scoping.

References:

  (1) https://eslint.org/docs/user-guide/configuring#specifying-environments

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Use eslint-config-arcticicestudio preset and override conflicting rules
23c2d25 
The used preset eslint-config-arcticicestudio (1) implements the Arctic
Ice Studio JavaScript Style (2). It it built on top of
eslint-config-arcticicestudio-base (3) and includes support for rules of
the following plugins:

- eslint-plugin-import (4)
- eslint-plugin-jsx-a11y (5)
- eslint-plugin-react (6)

>> Disabled rules

Due to compatibility problems and message noise the `no-confusing-arrow`
rule has been disabled. It can be re-enabled again when the used preset
handles the problem or disables the rule too.

Also to suppress errors in the future with Gatsby the
`import/no-extraneous-dependencies` has been overridden (still error
`level`) by adding the `devDependencies` option and add the exception
for `./.gatsby/**/*.js`. This allows to use development dependencies in
Gatsby configuration files without linting errors since these are
necessary and some will be provided by Gatsby itself without being
explicitly added to the `package.json`.

References:

  (1) https://github.com/arcticicestudio/eslint-config-arcticicestudio
  (2) https://arcticicestudio.github.io/styleguide-javascript
  (3) https://github.com/arcticicestudio/eslint-config-arcticicestudio-base

  (4) https://github.com/benmosher/eslint-plugin-import
  (5) https://github.com/evcohen/eslint-plugin-jsx-a11y
  (6) https://github.com/yannickcr/eslint-plugin-react

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Prepare ESLint compatibility with Webpack
4dd1095 
To prepare for a better developer experience with Webpack (that will be
used later on through Gatsby) the resolvers of the
eslint-plugin-import (1) have been configured for the `src` and
`src/components` paths.

References:

  (1) https://github.com/benmosher/eslint-plugin-import#resolvers

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Configure "babel-eslint" as main parser
f043313 
To allow to lint all valid Babel code babel-eslint (1) has been included
and specified as main parser (2).

References:

  (1) https://github.com/babel/babel-eslint
  (2) https://eslint.org/docs/user-guide/configuring#specifying-parser

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Integrate "eslint-plugin-babel" with override rules
f23215e 
To make use of the latest experimental Babel features and proposals
eslint-plugin-babel (1) has been added. The following rules have been
enabled and configured:

- `babel/camelcase` with level `error` - doesn't complain about optional
  chaining (`let foo = bar?.a_b;`). The core rule `camelcase` (2) has
  been disabled.
- `babel/no-unused-expressions` with level `error` - doesn't fail when
  using `do` expressions or optional chaining (`a?.b()`). The core rule
  `no-unused-expressions` (3) has been disabled.

References:

  (1) https://github.com/babel/eslint-plugin-babel
  (2) https://eslint.org/docs/rules/camelcase
  (3) https://eslint.org/docs/rules/no-unused-expressions

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Implement NPM scripts/tasks lint and format with ESLint
5ebcc81 
To allow to run the JavaScript linting separately a `lint:js`
script/task has been added to be included in the main `lint` script
flow later on. To use the great auto-fixing feature another `format:js`
script/task has been added too.

References:

  (1) https://eslint.org/docs/user-guide/command-line-interface#fixing-problems

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Ensure to run ESLint on automatically ignored dotfiles
40f22f0 
The ignore pattern for dotfiles it automatically applied by ESLint to
prevent accidentally lint over paths like ".cache", ".git" or any other
critical paths. Explicitly excluding dotfiles from the ignore pattern
allows to lint these files.

GH-15
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Update to latest eslint-config-arcticicestudio-base version
2743f09 
It includes an improvement where the `keywords` (1) and `numbers` (1)
options of the `quote-props` rule have been disabled since the preset
does not target legacy ES3 environments. The deactivation prevents
unnecessary and noisy warnings. See the changelog (3) for more details.

The package is resolved through the "eslint-config-arcticicestudio"
package.

References:

  (1) https://eslint.org/docs/rules/quote-props.html#keywords
  (2) https://eslint.org/docs/rules/quote-props.html#numbers
  (3) https://github.com/arcticicestudio/eslint-config-arcticicestudio-base/blob/develop/CHANGELOG.md#050

GH-15
@arcticicestudio arcticicestudio mentioned this issue Nov 17, 2018
Merged
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Merge pull request #20 from arcticicestudio/feature/gh-15-eslint
d4bd783 
Merge pull request #20 from arcticicestudio/feature/gh-15-eslint

Integrated ESLint (1), the pluggable and de-facto standard linting
utility for JavaScript.

>> Configuration Preset

The "eslint-config-arcticicestudio" configuration preset is used is
which the Arctic Ice Studio JavaScript Style (3). It it built on top of
eslint-config-arcticicestudio-base (4) and includes rules of the
following plugins:

- eslint-plugin-import (5)
- eslint-plugin-jsx-a11y (6)
- eslint-plugin-react (7)

Since the custom preset is still in major version `0` note that the
version range is `>=0.x.x <1.0.0` to avoid NPM's "SemVer Major Zero
Caveat". When defining package versions with the the carat `^` or tilde
`~` range selector it won't affect packages with a major version of `0`.
NPM will resolve these packages to their exact version until the major
version is greater or equal to `1`.
To avoid this caveat the more detailed version range `>=0.x.x <1.0.0` is
used to resolve all versions greater or equal to `0.x.x` but less than
`1.0.0`. This will always use the latest `0.x.x` version and removes the
need to increment the version manually on each new release.

To allow to lint all valid Babel code babel-eslint (8) will be included
and specified as main parser (9). Also to make use of the latest
experimental Babel features and proposals eslint-plugin-babel (10) has
been added:

- `babel/camelcase` with level `error` - doesn't complain about optional
  chaining (`let foo = bar?.a_b;`). The core rule `camelcase` (1) has
  been disabled.
- `babel/no-unused-expressions` with level `error` - doesn't fail when
  using `do` expressions or optional chaining (`a?.b()`). The core rule
  `no-unused-expressions` (12) has been disabled.

See the documentation of provided rules (13) and required configurations
to use them.

The `.eslintrc.js` configuration file has been placed in the project
root next to the `.eslintignore` file to define ignore pattern.
It specifies the environments (14) which define global variables that
are predefined:

- `browser` - browser global variables.
- `node` - Node.js global variables and Node.js scoping.

>>> Webpack preparations

To prepare for a better developer experience with Webpack (which will be
used later on through Gatsby) the resolvers of the
eslint-plugin-import (15) are configured for the `src` and
`src/components` paths.

>>>> Disabled rules

Due to compatibility problems and message noise the `no-confusing-arrow`
rule has been disabled. It can be re-enabled again when the used preset
handles the problem or disables the rule too.

Also to suppress errors in the future with Gatsby the
`import/no-extraneous-dependencies` has also been overridden (still
error `level`) by adding the `devDependencies` option and add the
exception for `./.gatsby/**/*.js`. This allows to use development
dependencies in Gatsby configuration files without linting errors since
these are necessary and some will be provided by Gatsby itself without
being explicitly added to the `package.json`.

>> NPM scripts/tasks

To allow to run the JavaScript linting separately a `lint:js` NPM
script/task has been added to be included in the main `lint` script flow
later on. To use the great auto-fixing (16) feature another `format:js`
script/task has been added too.

>> Initial Linting

Afterwards the current code base has been linted for first time to find
potential JavaScript style guide violations, but all sources were
compliant.

References:

  (1) https://eslint.org
  (2) https://github.com/arcticicestudio/eslint-config-arcticicestudio
  (3) https://arcticicestudio.github.io/styleguide-javascript
  (4) https://github.com/arcticicestudio/eslint-config-arcticicestudio-base
  (5) https://github.com/benmosher/eslint-plugin-import
  (6) https://github.com/evcohen/eslint-plugin-jsx-a11y
  (7) https://github.com/yannickcr/eslint-plugin-react
  (8) https://github.com/babel/babel-eslint
  (9) https://eslint.org/docs/user-guide/configuring#specifying-parser
  (10) https://github.com/babel/eslint-plugin-babel
  (11) https://eslint.org/docs/rules/camelcase
  (12) https://eslint.org/docs/rules/no-unused-expressions
  (13) https://github.com/babel/eslint-plugin-babel#rules
  (14) https://eslint.org/docs/user-guide/configuring#specifying-environments
  (15) https://github.com/benmosher/eslint-plugin-import#resolvers
  (16) https://eslint.org/docs/user-guide/command-line-interface#fixing-problems
@arcticicestudio arcticicestudio removed their assignment Nov 17, 2018
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Integrate and configure "eslint-plugin-prettier"
ea89d84 
To be fully compatible with ESLint (implemented in GH-15),
eslint-plugin-prettier (1) has been added to the plugins array of the
ESLint configuration. To enable full compatibility the
`prettier/prettier` rule has been added with the `error` level.

References:

  (1) https://www.npmjs.com/package/eslint-plugin-prettier

GH-16
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Merge pull request #21 from arcticicestudio/feature/gh-16-prettier
39af1da 
Merge pull request #21 from arcticicestudio/feature/gh-16-prettier

Integrated Prettier (1), the opinionated code formatter with support for
many languages and integrations with most editors. It ensures that all
outputted code conforms to a consistent style.

>> Configuration

This is one of the main features of Prettier: It already provides the
best and recommended style configurations of-out-the-box.
The only option we will change is the print width (2). It is set to 80
by default which not up-to-date for modern screens (might only be
relevant when working in terminals only like e.g. with Vim). It is now
set to changed to 120 used by all of Arctic Ice Studio's style guides.
The `prettier.config.js` configuration file is placed in the project
root as well as the `.prettierignore` file to also define ignore
pattern.

>> ESLint Compatibility

To be fully compatible with ESLint (implemented in #15),
eslint-plugin-prettier (3) has been included and added to the `plugins`
array of the ESLint configuration (4). To enable full compatibility the
`prettier/prettier` rule must be added with the `error` level.

>> NPM script/task

To allow to format all sources a `format:pretty` npm script/task has
been added to be included in the main `format` script flow later on.

>> Initial Formatting

Afterwards Prettier has been run on the current code base Format and
fixed found style guide violations using the configured linters.

References:

  (1) https://prettier.io
  (2) https://prettier.io/docs/en/options.html#print-width
  (3) https://github.com/prettier/eslint-plugin-prettier
  (4) https://eslint.org/docs/user-guide/configuring#configuring-plugins
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Implement "lint-staged" configuration file
1af462b 
The configuration file `lint-staged.config.js` (1) has been placed in
the project root and includes the commands that should be run for
matching file extensions (globs). It includes at least the three
following entries with the same order as listed here:

1. `prettier --list-different` - Run Prettier (#16) against
   `*.{js,json,jsx,mdx,yml}` to ensure all files are formatted
   correctly. The `--list-different` flag prints the found files that
   are not conform to the Prettier configuration.
2. `eslint` - Run ESLint (#15) against `*.{js,jsx}` to ensure all
   JavaScript files are compliant to the style guide after being
   formatted with Prettier.
3. `remark --no-stdout` - Run remark-lint (#14) against `*.md` to ensure
   all Markdown files are compliant to the style guide. The
   `--no-stdout` flag suppresses the output of the parsed file content.

References:

  (1) https://github.com/okonet/lint-staged

GH-17
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Merge pull request #22 from arcticicestudio/task/gh-17-lint-staged
6ab1091 
Merge pull request #22 from arcticicestudio/task/gh-17-lint-staged

Integrated lint-staged (1) to run linters against staged Git files to
prevent to add code that violates any style guide into the code base.

>> Configuration

The configuration file `lint-staged.config.js` (1) has been placed in
the project root and includes the commands that should be run for
matching file extensions (globs). It includes at least the three
following entries with the same order as listed here:

1. `prettier --list-different` - Run Prettier (#16) against
   `*.{js,json,jsx,mdx,yml}` to ensure all files are formatted
   correctly. The `--list-different` flag prints the found files that
   are not conform to the Prettier configuration.
2. `eslint` - Run ESLint (#15) against `*.{js,jsx}` to ensure all
   JavaScript files are compliant to the style guide after being
   formatted with Prettier.
3. `remark --no-stdout` - Run remark-lint (#14) against `*.md` to ensure
   all Markdown files are compliant to the style guide. The
   `--no-stdout` flag suppresses the output of the parsed file content.

References:

  (1) https://github.com/okonet/lint-staged
This was referenced Nov 21, 2018
Open
Closed
arcticicestudio added a commit that referenced this issue Nov 24, 2018
@arcticicestudio
Fix overridden ESLint "import/no-extraneous-dependencies" rule
7eccff4 
The import/no-extraneous-dependencies (1) rule allows to define a array
of glob pattern that are allowed to define import `devDependencies`. In
GH-15 the rule was overridden to include the project specific path
`**/.gatsby/**` which whitelists all Gatsby specific scripts.
Unfortunately this removes all glob pattern defined in the used
"eslint-config-arcticicestudio" (2) (rule is defined in the `-base`
package) resulting in errors in other projects paths like tests.
This has been fixed by importing the paths defined in the preset from
the "eslint-config-arcticicestudio-base" (3) package and merge it with
the additional **/.gatsby/**` path.

References:
  (1) https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
  (2) https://www.npmjs.com/package/eslint-config-arcticicestudio
  (3) https://www.npmjs.com/package/eslint-config-arcticicestudio-base

Fixes GH-41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
context-workflow scope-maintainability scope-performance scope-stability type-feature
Projects
None yet
Milestone
0.1.0
Development

No branches or pull requests
1 participant
@arcticicestudio