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

Prettier #16

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

Prettier #16

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

Comments

@arcticicestudio
Copy link
Contributor

arcticicestudio commented Nov 16, 2018 •
edited
Loading

Must be resolved after #15

Integrate Prettier, 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. 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'll be changed to 120 used by all of Arctic Ice Studio's style guides.
The prettier.config.js configuration file will be 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 will be included and added to the plugins array of the ESLint configuration. 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 will be added to be included in the main format script flow.

Tasks

  • Install prettier and eslint-plugin-prettier packages.
  • Implement prettier.config.js configuration file.
  • Implement .prettierignore ignore pattern file.
  • Integrate and configure eslint-plugin-prettier.
    • Add the prettier/prettier rule with the error level.
  • Implement NPM format:pretty script/task.
  • Format current code base for the first time and fix possible style guide violations using the configured linters of the project.
@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 "prettier" and "eslint-plugin-prettier"
b5e4dc2 
Installed the main "prettier" (1) package and
"eslint-plugin-prettier" (2) for ESLint compatibility.

References:

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

GH-16
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Implement Prettier configuration and ignore pattern file
67ae0d9 
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 that has been changed is the print width (1). 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 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 that defines ignore pattern.

References:

  (1) https://prettier.io/docs/en/options.html#print-width

GH-16
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
Implement NPM format:pretty script/task
a916a3d 
To allow to format all sources the `format:pretty` NPM script/task has
been added to be included in the main format script flow later on.

GH-16
arcticicestudio added a commit that referenced this issue Nov 17, 2018
@arcticicestudio
Initial format with Prettier
9a3abd7 
Run Prettier on the current code base for the first time to format
according to the configuration.

GH-16
@arcticicestudio arcticicestudio mentioned this issue Nov 17, 2018
Merged
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 arcticicestudio removed their assignment Nov 17, 2018
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
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 type-feature
Projects
None yet
Milestone
0.1.0
Development

No branches or pull requests
1 participant
@arcticicestudio