Linting
Contents
Linting#
Volto developers can enjoy a lot of freedom in their choice of text editors and IDEs, thanks to the strong tooling provided by the JavaScript ecosystem.
Volto uses ESLint, the advanced JavaScript linting and formatting tool, Stylelint, and Prettier.
Editor integration#
For Visual Studio Code, you'll need to install VS Code ESLint extension.
For Vim and NeoVim, you can use Asynchronous Lint Engine (ALE) It provides out-of-the box integration with all the tooling provided by Volto.
PyCharm Professional includes ESLint, Stylelint, and Prettier.
Use this checklist to make sure you have correctly configured your editor, most importantly for .js
and .jsx
files, the editor should automatically:
flag syntax errors
flag unused imports
properly flag imported modules that are not found
format code on save
Lint Volto core#
If you want to contribute to Volto core, you must perform several code quality control tasks. Your commits must not break the automated tests, or GitHub workflows, that Volto performs on every push or pull request.
Code linting is the first step in the testing hierarchy.
Volto core should automatically perform linting commands when you commit locally, as provided by the husky integration. However if the automated check doesn't happen when performing a commit, or you want to get less information, you can also run each linting task manually, as described in Eslint, Prettier, and Stylelint.
If you want to see exactly which linting commands are set to run after a commit, look at the .lintstagedrc
at the root of the repository.
Volto core performs linting using the following commands:
eslint
For finding problems in the project's code files.
prettier
For uniform code formatting.
stylelint
For uniform style formatting.
Although we can run the linting commands from the root of the repository, it is easier to run the commands only for Volto core within the Volto core folder:
cd packages/volto
From here we will have access to the commands to check for errors and to fix them.
See also
Eslint, Prettier, and Stylelint#
You can run the pnpm eslint
, prettier
, and stylelint
commands from the Volto package folder:
pnpm lint
pnpm prettier
pnpm stylelint
If we get any errors, some of them can be solved automatically by running pnpm commands as <lint_command>:fix
:
pnpm lint:fix
pnpm prettier:fix
pnpm stylelint:fix
New in version Volto: 18.0.0-alpha.43
Cookieplone is now the recommended way to develop Volto projects, using it as a boilerplate generator.
Cookieplone uses the frontend code installed using pnpm
instead of yarn
.
Deprecated since version Volto: 18.0.0
The same commands can be found in your Volto legacy add-ons and projects created with @plone/generator-volto
, as seen in the package.json.tpl
file.
You will use similar commands to run the linting commands, but with yarn
instead of pnpm
:
yarn lint
yarn lint:fix
yarn prettier
yarn prettier:fix
yarn stylelint
yarn stylelint:fix
Important
If the fix
commands cannot fix the errors given by the linting commands, you will need to fix the errors manually.
Do not push commits that do not pass lint checks.
It will not pass GitHub workflow checks, and your contribution will not be merged.