Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 0bf09b4b authored by Hugues's avatar Hugues
Browse files

(add suggested format changes) why and how use Prettier and ESLint

parent ef61ada8
No related branches found
No related tags found
1 merge request!14Resolve "(ci) configure Prettier"
Pipeline #2144 passed
...@@ -94,15 +94,15 @@ make code more consistent in itself and across team members and detect problemat ...@@ -94,15 +94,15 @@ make code more consistent in itself and across team members and detect problemat
eslint commands: eslint commands:
- to see errors: npx eslint (file-name) - to see errors: `npx eslint (file-name)`
Warning: you can make this command, to target just files into src folder, Warning: you can make this command, to target just files into src folder,
(find this command in scripts of .gitlab-ci.yml) (find this command in scripts of .gitlab-ci.yml)
- to fix errors: npx eslint (file-name) --fix - to fix errors: `npx eslint (file-name) --fix`
Warning: like the last command, you can target files into src folder and fix Warning: like the last command, you can target files into src folder and fix
linting errors with: npm run fix linting errors with: `npm run fix`
prettier command to fix errors: prettier command to fix errors:
npx prettier (file-name) --write `npx prettier (file-name) --write`
2. install extention: 2. install extention:
...@@ -115,7 +115,7 @@ First, we need to let Prettier do is job ...@@ -115,7 +115,7 @@ First, we need to let Prettier do is job
In order to be able to use ESLint alongside Prettier, the idea is to deactivate all ESLint rules that might conflict with Prettier (code formatting rules). In order to be able to use ESLint alongside Prettier, the idea is to deactivate all ESLint rules that might conflict with Prettier (code formatting rules).
Fortunately for us, the eslint-config-prettier package already does that. Fortunately for us, the eslint-config-prettier package already does that.
We will rewrite our .eslintrc file by adding prettier to the extends array and removing any code formatting rules we had. We will rewrite our `.eslintrc` file by adding prettier to the extends array and removing any code formatting rules we had.
The prettier configuration will override any prior configuration in the extends array disabling all ESLint code formatting rules. With this configuration, The prettier configuration will override any prior configuration in the extends array disabling all ESLint code formatting rules. With this configuration,
Prettier and ESLint can be run separately without any issues. Prettier and ESLint can be run separately without any issues.
...@@ -125,7 +125,7 @@ Next, we need to integrate Prettier with ESLint ...@@ -125,7 +125,7 @@ Next, we need to integrate Prettier with ESLint
The process of having to run two commands to lint and format our file is not very convenient. To fix this, we will integrate Prettier with ESLint by adding The process of having to run two commands to lint and format our file is not very convenient. To fix this, we will integrate Prettier with ESLint by adding
the eslint-plugin-prettier package. the eslint-plugin-prettier package.
We will now rewrite our .eslintrc file by adding the prettier plugin in the plugins array and setting the newly established prettier rule to error so We will now rewrite our `.eslintrc` file by adding the prettier plugin in the plugins array and setting the newly established prettier rule to error so
that any prettier formatting error is considered as an ESLint error. that any prettier formatting error is considered as an ESLint error.
We can take an unlinted file and apply ESLint on it. They are marked by prettier/prettier as errors within our ESLint error output We can take an unlinted file and apply ESLint on it. They are marked by prettier/prettier as errors within our ESLint error output
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment