cra-templates

A collection of templates for Create React App.

Templates

• npx create-react-app my-app --template all-visx.
• npx create-react-app my-app --template quickstart.
• npx create-react-app my-app --template quickstart-eslint-prettier.

Notes

• cra-template-[template-name].
• yarn add prettier --ignore-workspace-root-check --dev.
• simple-react-boilerplate.
• Test a template locally:
  • npx create-react-app my-app --template file:/Users/joao.palmeiro/Documents/GitHub/cra-templates/packages/cra-template-quickstart.
  • npx create-react-app my-app --template file:/Users/joao.palmeiro/Documents/GitHub/cra-templates/packages/cra-template-all-visx.
  • npx create-react-app my-app --template file:/Users/joao.palmeiro/Documents/GitHub/cra-templates/packages/cra-template-quickstart-eslint-prettier.
• ESLint:
  • eslint-loader (deprecated) and eslint-webpack-plugin (ESLint plugin for webpack).
  • eslint-config-prettier (to turn off all unnecessary or conflicting rules with Prettier). As of version 8.0.0, just add "prettier" (no need to add "prettier/react").
  • eslint-plugin-prettier. "plugin:prettier/recommended" includes eslint-config-prettier.
  • eslint-config-react-app (ESLint configuration used by CRA).
  • Run ESLint (CRA): ./node_modules/.bin/eslint (./node_modules/.bin/eslint --print-config package.json).
  • Integrate ESLint with Prettier: yarn add -D prettier eslint-config-prettier eslint-plugin-prettier.
  • Plugins ("plugins") vs. Configs ("extends"):
    • Plugin: set of rules that must be explicitly applied individually (source). A plugin does not enforce any rule.
    • Config: set of applied rules.
    • A plugin can provide zero, one, or more configuration files.
  • VS Code ESLint extension:
    • File exists, but ENOENT: no such file or directory... reported. (open) issue.
  • eslint-plugin-notice (for copyright headers).
  • eslint-plugin-html.
• Prettier:
  • VS Code Prettier extension. VS Code default formatter ("prettier.disableLanguages" is deprecated).
  • Configuration for disabling formatting issue.
  • Badge.
• template.json example.
• react-scripts dependencies.
• Lerna:
  • Badge.

References

• Ian Sutherland's "CRA Minimal Templates" repo/packages.
• Custom Templates.
• José Silva's "Lerna & Yarn Workspaces" blog post.
• Extending or replacing the default ESLint config.
• VS Code language identifiers.
• Brady Dowling's Setting up Create React App, VS Code, ESLint, and Prettier blog post.
• Alexey Nikiforov's Setup React App with TypeScript, ESLint and Prettier blog post.
• Marcin Kapica's Using ESLint and Prettier in Create React App blog post.
• Multiple languages specific editor settings (open) issue (VS Code).