diff --git a/README.md b/README.md index 341369f..04e9c89 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,22 @@ No spinning logo, no unnecessary boilerplate code. In addition to [the official JavaScript template](https://github.com/facebook/create-react-app/tree/main/packages/cra-template), the following dependencies are included by default: - [classnames](https://www.npmjs.com/package/classnames) +- [prettier](https://www.npmjs.com/package/prettier) - [prop-types](https://www.npmjs.com/package/prop-types) - [react-router-dom](https://www.npmjs.com/package/react-router-dom) +- [stylelint](https://www.npmjs.com/package/stylelint) +- [stylelint-config-prettier](https://www.npmjs.com/package/stylelint-config-prettier) +- [stylelint-config-standard](https://www.npmjs.com/package/stylelint-config-standard) +- [stylelint-prettier](https://www.npmjs.com/package/stylelint-prettier) Furthermore, there are the following additions: - HTTPS is enabled in development and test mode +- Some additional npm scripts are available: + - `npm run lint-js` to run ESLint + - `npm run lint-css` to run Stylelint + - `npm run lint` to run both ESLint and Stylelint + - `npm run prettier` to run a Prettier check To use this template, add `--template javascript-blank` when creating a new app. diff --git a/template.json b/template.json index adc0c44..231b5dd 100644 --- a/template.json +++ b/template.json @@ -5,12 +5,23 @@ "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "classnames": "^2.3.1", + "prettier": "^2.7.1", "prop-types": "^15.8.1", "react-router-dom": "^6.3.0", + "stylelint": "^14.9.1", + "stylelint-config-prettier": "^9.0.3", + "stylelint-config-standard": "^26.0.0", + "stylelint-prettier": "^2.0.0", "web-vitals": "^2.1.0" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] + }, + "scripts": { + "lint": "npm run lint-js; npm run lint-css", + "lint-js": "eslint ./src", + "lint-css": "stylelint \"**/*.css\"", + "prettier": "prettier --check ." } } } diff --git a/template/.prettierrc.json b/template/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/template/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/template/.stylelintrc.json b/template/.stylelintrc.json new file mode 100644 index 0000000..79757b1 --- /dev/null +++ b/template/.stylelintrc.json @@ -0,0 +1,7 @@ +{ + "extends": ["stylelint-config-standard", "stylelint-config-prettier"], + "plugins": ["stylelint-prettier"], + "rules": { + "prettier/prettier": true + } +} diff --git a/template/src/reportWebVitals.js b/template/src/reportWebVitals.js index 5253d3a..9ecd33f 100644 --- a/template/src/reportWebVitals.js +++ b/template/src/reportWebVitals.js @@ -1,6 +1,6 @@ -const reportWebVitals = onPerfEntry => { +const reportWebVitals = (onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); diff --git a/template/src/setupTests.js b/template/src/setupTests.js index 8f2609b..1dd407a 100644 --- a/template/src/setupTests.js +++ b/template/src/setupTests.js @@ -2,4 +2,4 @@ // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; +import "@testing-library/jest-dom";