@rimac-technology/style-guide v10.0.0
Style Guide
This repository encapsulates all the different configurations we use at Rimac Technology when developing with JS
Firstly install the style guide @rimac-technology/style-guide
and then pick the configurations you need:
Prettier
Install
prettier
as a dev dependencyCreate a new file at the root of your project called
.prettierrc.js
with the following
module.exports = {
...require('@rimac-technology/style-guide/prettier'),
}
- Create a
.prettierignore
file with the following
CHANGELOG.md # If your project contains it
Add a script to your
package.json
withprettier --loglevel warn --no-editorconfig --no-error-on-unmatched-pattern --check \"./**/*{yaml,yml,json,md,gql,graphql,prisma}\"
- Adjust the glob to match files you want to check
- This glob will match all the files recursively in your project
Do a test run and see what prettier matches and add files you don't want to check in it since prettier still doesn't support having
.gitignore
and.prettierignore
working together
Package JSON
Install
npm-package-json-lint
as a dev dependencyCreate a new file at the root of your project called
.packagerc.js
with- If you are using workspaces
module.exports = { extends: '@rimac-technology/style-guide/package-json/workspaces', }
- If you are not using workspaces
module.exports = { extends: '@rimac-technology/style-guide/package-json/core', }
Add a script to your
package.json
withnpmPkgJsonLint --configFile ./.packagerc.js .
ESLint
Install
eslint
as a dev dependencyCreate a new file at the root of your project called
.eslintrc.js
with the following- Make sure
parserOptions.project
points to the correcttsconfig.json
location
- Make sure
module.exports = {
extends: [require.resolve('@rimac-technology/style-guide/eslint/core')],
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
},
ignorePatterns: ['**/*generated.json'],
}
Add a script to your
package.json
witheslint './**/*.{js,ts}' --quiet --cache --cache-strategy content --cache-location '.eslintcache/'
- Adjust the
glob
to match files your want to check- For example all ts, js and tsx files:
./**/*.${js,ts,tsx}
- For example all ts, js and tsx files:
- Adjust the
You can use any of the optional rulesets
@rimac-technology/style-guide/eslint/react
@rimac-technology/style-guide/eslint/jest
@rimac-technology/style-guide/eslint/mobx
@rimac-technology/style-guide/eslint/next
- You need to add a setting to point to your pages directory in
.eslintrc.js
config file like somodule.exports = { // Other config stuff settings: { next: { rootDir: './packages/web/', }, }, // Other config stuff }
- You need to add a setting to point to your pages directory in
- Example configuration with overrides for only
.test.ts
files withjest
ruleset
module.exports = { extends: [require.resolve('@rimac-technology/style-guide/eslint/core')], parser: '@typescript-eslint/parser', parserOptions: { project: './tsconfig.json', }, overrides: [ { files: ['**/*.test.ts'], extends: [require.resolve('@rimac-technology/style-guide/eslint/jest')], }, ], }
Add eslint cache to
.gitignore
like so
.eslintcache
Stylelint
Install
stylelint
as a dev dependencyCreate a new file at the root of your project called
.stylelintrc.js
with the following
module.exports = {
extends: '@rimac-technology/style-guide/stylelint',
}
Add a script to your
package.json
withstylelint --cache --allow-empty-input './**/*.css'
Add stylelint cache to
.gitignore
like so
.stylelintcache
CSpell
Install
cspell
as a dev dependencyCreate a new file at the root of your project called
.cspell.json
with the following
{
"useGitignore": true,
"cache": {
"useCache": true,
"cacheStrategy": "content",
"cacheLocation": "./.cspellcache"
},
"ignorePaths": [
// Add ignored paths/files here
],
"ignoreWords": [
// Add words here
]
}
Add a script to your
package.json
withcspell --no-progress --no-summary '**'
Add cspell cache to
.gitignore
like so
.cspellcache
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
5 months ago
9 months ago
8 months ago
8 months ago
7 months ago
7 months ago
10 months ago
10 months ago
6 months ago
9 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago