mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-11-25 05:08:32 +00:00
Change all content from rst format to markdown and correct spelling/grammar
This commit is contained in:
62
docs/source/development/es-lint.md
Normal file
62
docs/source/development/es-lint.md
Normal file
@@ -0,0 +1,62 @@
|
||||
## ESLint
|
||||
|
||||
To improve the quality of our JS and VueJS code, ESLint and eslint-plugin-vue are implemented within the chill-bundles project.
|
||||
|
||||
### Commands
|
||||
|
||||
To run ESLint, you can simply use the [`eslint`` command within the chill-bundles directory.
|
||||
This runs eslint **not** taking the baseline into account, thus showing all existing errors in the project.
|
||||
|
||||
A script was also added to package.json allowing you to execute ``yarn run eslint``.
|
||||
This will run eslint, but **taking the baseline into account**, thus only alerting to newly created errors.
|
||||
|
||||
The eslint command is configured to also run ``prettier`` which will simply format the code to look more uniform (takes care indentation for example).
|
||||
|
||||
Interesting options that can be used in combination with eslint are:
|
||||
|
||||
- ``--quiet`` to only get errors and silence the warnings
|
||||
- ``--fix`` to have ESLint fix what it can, automatically. This will not fix everything.
|
||||
|
||||
### Baseline
|
||||
|
||||
To allow us the time to fix linting errors/warnings, a baseline has been created using the following command
|
||||
- ``npx eslint-baseline "**/*.{js,vue}"``
|
||||
|
||||
The baseline has been committed and the gitlab CI setup to only fail upon new errors/warnings being created.
|
||||
When fixing errors/warnings manually, please update the baseline.
|
||||
|
||||
1. Delete the current baseline file
|
||||
2. Run the above command locally, this will automatically create a new baseline that should be commited
|
||||
|
||||
### Rules
|
||||
|
||||
We use Vue 3, so the rules can be configured as follows within the ``eslint.config.mjs`` file:
|
||||
|
||||
- ``.configs["flat/base"]`` ... Settings and rules to enable correct ESLint parsing.
|
||||
|
||||
Configurations for using Vue.js 3.x:
|
||||
|
||||
- ``.configs["flat/essential"]`` : Base rules plus rules to prevent errors or unintended behavior.
|
||||
- ``.configs["flat/strongly-recommended"]`` ... Above, plus rules to considerably improve code readability and/or dev experience.
|
||||
- ``.configs["flat/recommended"]`` ... Above, plus rules to enforce subjective community defaults to ensure consistency.
|
||||
|
||||
Detailed information about which rules each set includes can be found here:
|
||||
`https://eslint.vuejs.org/rules/ ](https://eslint.vuejs.org/rules/)
|
||||
|
||||
### Manual Rule Configuration
|
||||
|
||||
We can also manually configure certain rules or override rules that are part of the ruleset specified above.
|
||||
|
||||
For example, if we want to turn off a certain rule, we can do so as follows:
|
||||
|
||||
rules: {
|
||||
'vue/multi-word-component': 'off'
|
||||
}
|
||||
|
||||
We could also change the severity of a certain rule from 'error' to 'warning', for example.
|
||||
|
||||
Within specific ``.js`` or ``.vue`` files, we can also override a certain rule only for that specific file by adding a comment:
|
||||
|
||||
/* eslint multi-word-component: "off", no-child-content: "error"
|
||||
--------
|
||||
Here's a description about why this configuration is necessary. */
|
||||
Reference in New Issue
Block a user