mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
72 lines
2.8 KiB
ReStructuredText
72 lines
2.8 KiB
ReStructuredText
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 commited 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:
|
|
|
|
.. code-block:: javascript
|
|
|
|
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:
|
|
|
|
.. code-block:: javascript
|
|
|
|
/* eslint multi-word-component: "off", no-child-content: "error"
|
|
--------
|
|
Here's a description about why this configuration is necessary. */
|