Archived

This repo has been archived as it's outdated, and is more useful as a reference than a project starter template.

Vite Config Template

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

Notable Files

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

Node & Browser Compatibility

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 under extends: as well as the compat item in the plugins: array.

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

Vite

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

Installation

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.

License

This project is MIT licensed.