Please Note: I am willing to personally contribute this if @ben-rogerson approves.
Motivation
twin.macro is gaining some traction and contributions are coming in from the community.
I think it would be wise to now enforce some code quality and increase stability through the addition of static code testing as a pre
Steps to Solve
To achieve this I think that we should:
Proposed Configuration
The following configurations I would propose we use are adopted from a project that I am currently using twin.macro
in.
eslint
Plugins Used
It uses the following plugins:
- @typescript/eslint
- unicorn
- xo
- chai-friendly
- jest
- import
- prettier
Configuration File
// .eslintrc.js
module.exports = {
settings: {
version: 'detect',
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:unicorn/recommended',
'xo/browser',
'xo/esnext',
'xo-typescript/space',
'xo-react/space',
'plugin:chai-friendly/recommended',
'plugin:jest/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'prettier/@typescript-eslint',
'prettier',
'prettier/babel',
'prettier/react',
'prettier/unicorn',
],
plugins: ['chai-friendly', 'jest', 'import'],
rules: {
'@typescript-eslint/semi': 0,
'@typescript-eslint/restrict-template-expressions': 0,
'@typescript-eslint/default-param-last': 0,
'react/prop-types': 0,
'jest/prefer-expect-assertions': 0,
'capitalized-comments': 0,
'comma-dangle': 0,
'import/extensions': [
'error',
{
svg: 'allow',
},
],
'import/no-unassigned-import': [
'error',
{
allow: ['**/*.css'],
},
],
},
overrides: [
{
files: ['**/*.ts', '**/*.js'],
rules: {
'jest/no-try-expect': 0,
},
},
{
files: ['**/*.js', '**/*.jsx'],
rules: {
'@typescript-eslint/explicit-function-return-type': 0,
'@typescript-eslint/space-before-function-paren': 0,
'@typescript-eslint/no-unsafe-call': 0,
'@typescript-eslint/no-unsafe-member-access': 0,
'@typescript-eslint/prefer-readonly-parameter-types': 0,
},
},
],
}
Husky / Lint-Staged
// package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
"eslint --cache --fix",
"jest --findRelatedTests"
],
"*.{js,ts,jsx,tsx,json,md}": [
"prettier --write"
]
}
}
Prettier
// .prettierrc
{
"endOfLine": "lf",
"semi": false,
"singleQuote": true,
"bracketSpacing": false,
"tabWidth": 2,
"jsxBracketSameLine": false,
"trailingComma": "es5",
"useTabs": false
}