Gathering detailed insights and metrics for @team-supercharge/react-native-quality-config
Gathering detailed insights and metrics for @team-supercharge/react-native-quality-config
Installations
npm install @team-supercharge/react-native-quality-configDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=16.14.0
Node Version
16.14.0
NPM Version
8.3.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
397
Last Day
1
Last Week
1
Last Month
7
Last Year
64
Maintainers
7
Package Meta Information
Latest Version
70.1.1
Package Id
@team-supercharge/react-native-quality-config@70.1.1
Unpacked Size
12.62 kB
Size
4.65 kB
File Count
13
NPM Version
8.3.1
Node Version
16.14.0
Total Downloads
Cumulative downloads
Total Downloads
397
Last Day
-50%
1
Compared to previous day
Last Week
-50%
1
Compared to previous week
Last Month
600%
7
Compared to previous month
Last Year
-13.5%
64
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
12
Dev Dependencies
2
React Native Quality Config
This project contains basic linter rulesets for React Native 0.70.+ projects created with react-native-cli and react-native-template-typescript.
Important note
These linter rulesets will work if you will have a src directory under your project directory, and all of your typescript source files will be hosted there.
Versioning
Versioning follows React Native versioning, meaning the major versions should match. E.g.: @team-supercharge/react-native-quality-config@70.1.2 is compatible with react-native@70.x
Initial setup
Install this package as a dev dependency:
npm install --save-dev @team-supercharge/react-native-quality-config
Eslint setup
We use Eslint to lint the source code in our projects.
Replace the .eslintrc.js configuration file with the following:
module.exports = {
extends: './node_modules/@team-supercharge/react-native-quality-config/.eslintrc.js',
};
Usage in package.json:
"scripts": {
"lint:code": "eslint src --ext .ts,.tsx",
"lint:code:fix": "eslint src --ext .ts,.tsx --fix"
}
Prettier setup
We use Prettier to format the source code in our projects.
Replace the .prettierrc.js configuration file with the following:
module.exports = {
...require('./node_modules/@team-supercharge/react-native-quality-config/.prettierrc.js'),
};
Usage in package.json:
"scripts": {
"lint:style": "prettier --config .prettierrc.js --check './src/**/*.{ts,tsx,json}'",
"lint:style:fix": "prettier --config .prettierrc.js --write './src/**/*.{ts,tsx,json}'"
},
VSCode setup
We prefer Visual Studio Code as our code editor for React Native projects.
To be able to have auto-formatting when saving a source file, the following change need to be made.
Run cp -R node_modules/@team-supercharge/react-native-quality-config/vscode .vscode to create the VSCode workspace settings file in your project root. This will also create the recommended extensions settings file.
Alternatively you can manually create the .vscode/settings.json file with the following content:
{
"editor.tabSize": 2,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": true,
},
"[javascript]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.formatOnSave": true
},
"[json]": {
"editor.formatOnSave": true
},
"typescript.tsdk": "node_modules/typescript/lib",
}
To suggest developers to install the recommended plugins, the following change need to be made.
Create the .vscode/extensions.json file with the following content:
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
],
"unwantedRecommendations": ["ms-vscode.vscode-typescript-tslint-plugin"]
}
Linting scripts
Usage in package.json:
"scripts": {
"lint:style": "prettier --config .prettierrc.js --check './src/**/*.{ts,tsx,json}'",
"lint:style:fix": "prettier --config .prettierrc.js --write './src/**/*.{ts,tsx,json}'",
"lint:code": "eslint src --ext .ts,.tsx",
"lint:code:fix": "eslint src --ext .ts,.tsx --fix",
"lint:type": "tsc --project tsconfig.json --noEmit",
"lint": "npm run lint:style && npm run lint:code && npm run lint:type",
"lint:fix": "npm run lint:style:fix && npm run lint:code:fix && npm run lint:type"
},
Git hooks
We use Husky to manage git hooks.
Lint commit messages
We use Commitlint to lint commit messages.
Create a commitlint.config.js configuration file with the following content:
module.exports = {
extends: ['@team-supercharge/react-native-quality-config/commitlint.config'],
};
Setup the Husky commit hook in package.json
"husky": {
"hooks": {
"commit-msg": "commitlint -e $GIT_PARAMS"
}
}
Lint staged staged files before commit
With help of the lint-staged library we can optimize the running time of linters by linting the staged files only.
Usage in package.json:
"lint-staged": {
"*.{ts,tsx,json}": [
"prettier --config .prettierrc.js --check",
],
"*.{ts,tsx}": [
"eslint"
]
},
Setup the Husky commit hook in package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
No vulnerabilities found.
No security vulnerabilities found.