@airnauts/style-guide v1.7.1
This repository contains configuration files for several tools commonly used in projects to enforce certain rules improving code quality and style.
Prettier
In order to use shared Prettier configuration, add following entry to your package.json
.
{
"prettier": "@airnauts/style-guide/prettier"
}
Reminder: you still need to install Prettier in your project.
ESLint
The following configurations are available:
@airnauts/style-guide/eslint/javascript
@airnauts/style-guide/eslint/react
@airnauts/style-guide/eslint/typescript
(requires additional configuration)@airnauts/style-guide/eslint/react-typescript
(requires additional configuration)
You need to use require.resolve
to replace symbolic names with absolute paths.
In order to set up linting for your React application, open your .eslintrc
file and add the following code.
module.exports = {
extends: [
require.resolve('@airnauts/style-guide/eslint/javascript'),
require.resolve('@airnauts/style-guide/eslint/react'),
],
};
Reminder: you still need to install ESLint in your project.
Using TypeScript configuration variants
In order to properly apply certain rules ESLint needs to have access to tsconfig.json
file.
See following code snippet for an example how to provide such information.
const { resolve } = require('path');
const project = resolve(__dirname, 'tsconfig.json');
module.exports = {
root: true,
extends: [
require.resolve('@airnauts/style-guide/eslint/typescript'),
require.resolve('@airnauts/style-guide/eslint/react-typescript'),
],
parserOptions: {
project,
},
};
If you want to know more about this requirement, see: https://typescript-eslint.io/docs/linting/type-linting
Applying certain configuration variant only for selected directory
It's possible to apply a configuration to the selected directory only. It may be useful in the future when we will be exposing additional variants. Following code snippet shows an example of this feature using non-existing variant.
module.exports = {
extends: [require.resolve('@airnauts/style-guide/eslint/typescript')],
overrides: [
{
files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
extends: [require.resolve('@airnauts/style-guide/eslint/jest')],
},
],
};
Overriding TypeScript rules
When using overrides, it's mandatory to provide file extensions as ESLint works on JavaScript files only by default.
module.exports = {
overrides: [
{
files: [`src/**/*.[jt]s?(x)`],
rules: {
'some-selected-rule': 'off',
},
},
],
};
Stylelint
In order to use a shared Stylelint configuration, open your .stylelintrc
file and add the following code.
{
"extends": ["@airnauts/style-guide/stylelint"]
}
In order to enable validation for .css
and .scss
files inside VSCode
- install an extension
stylelint.vscode-stylelint
, - add the following rule to your VSCode's settings file
settings.json
.
{
"stylelint.validate": ["css", "scss"]
}
In order to enable autofix on save add the following rule to to your VSCode's settings file settings.json
.
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
Contributing
Please go through contributing guide before creating a pull request.