This template is a compilation of settings for a Vite Javascript project. It focuses on keeping production code as close to the original code as possible. Currently a work in progress though useful as a reference!
| Tools | Configured | Notes |
|---|---|---|
| ESLint | ✔️ | Uses .browserslistrc file and engines.node entry in package.json for browser + node compatibility. AirBnB styleguide. |
| Stylelint | ✔️ | Browser compatibility is enforced using .browserslistrc. Custom style rules defined in .stylelintrc.json |
| Jest | ✔️ | Additional ES linting configured for Jest specifics |
| Playwright | ✔️ | Similar to puppeteer. Additional ES linting configured for Playwright specifics |
| Github Actions | ✔️ | SCSS + JS linting and Jest unit + playwright tests. Configured to run on pull requests and pushes to master |
| SCSS | ✔️ | SASS should work as well |
| Yarn 2 | ✔️ | Plug n Play (PnP) is disabled in favor of node_modules for compatibility |
| VSCode | ✔️ | Some config settings for Stylelint |
| Git Hooks | ✔️ | ESLint & Stylelint configured to run on pre-commit |
| Prettier | ❌ | Code styling is enforced through ESLint and Stylelint |
| Typescript | ❌ | Vanilla JS used |
| Babel | ❌ | ESLint & Stylelint are configured to enforce compatibility over using Babel to transpile code |
| Codecov | ❌ | Planning on adding code coverage in the future |
These files contain documentaton that is helpful for referencing purposes.
| File | Notes |
|---|---|
index-ref.html |
Useful info like favicon tags and meta tags |
manifest.json |
Main attributes and what they're for |
robots.txt |
Some notes on robots.txt |
sitemap_index.xml |
How to use a sitemap_index and why use one |
sitemap.xml |
Sitemap schema and attributes |
reset.scss |
A file containing some browser CSS resets to disable unwanted behavior |
The project is configured to enforce JS compatibility using both .browserslistrc and the engines.node entry in package.json.
SCSS browser compatibility is also enforced using the .browserslistrc file.
-
eslint-plugin-compat enforces browser compatibility. To remove it, uninstall the package and remove
"plugin:compat/recommended"from your.eslintrc.jsonfile underextends:as well as thecompatitem in theplugins:array. -
eslint-plugin-node enforces node compatibility using the
engines.nodeentry inpackage.json. To remove it, uninstall the package and remove"plugin:node/recommended"from your.eslintrc.jsonfile underextends:as well as thenodeitem in theplugins:array. -
stylelint-no-unsupported-browser-features enforces browser compatibility for SCSS. To remove it, uninstall the package and remove
stylelint-no-unsupported-browser-featuresfrom theplugins:array in the.stylelintrc.jsonfile.
Vite is configured to:
- Compress assets using Brotli. GZip is another option.
- Optimize SVGs and images
- Minify for production
- Combine duplicate media queries, selectors and autoprefix styles based on the browser versions specified in
.browserslistrc
Run the yarn install command to set up the node_modules folder. If you want to try out yarn plug n play, remove
nodeLinker: node-modules from .yarnrc.yml before installing. Note the config isn't tested with that, so you'll likely need to adjust things to work.
This project is MIT licensed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent