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.json
file underextends:
as well as thecompat
item in theplugins:
array. -
eslint-plugin-node enforces node compatibility using the
engines.node
entry inpackage.json
. To remove it, uninstall the package and remove"plugin:node/recommended"
from your.eslintrc.json
file underextends:
as well as thenode
item 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-features
from theplugins:
array in the.stylelintrc.json
file.
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.