Initially built for personal use, I created this template for starting a new project with Vite.js and Vanilla Javascript. It is already set up with standard development tools like ESLint and Prettier for easy code formatting and linting, with Vite for a robust, modern build process.
This template uses the following dependencies:
- Vite: A next-generation frontend build tool that offers a fast dev server and optimized builds.
- ESLint: An open-source JavaScript linting utility that helps maintain a consistent code style.
- Prettier: An opinionated code formatter that enforces a consistent style across your project.
- eslint-config-airbnb-base and eslint-config-prettier: ESLint configurations adhering to Airbnb's base JS style guide and disabling stylistic rules that might conflict with Prettier.
- eslint-plugin-import and eslint-plugin-prettier: ESLint plugins that enforce ES2015+ import/export syntax and integrate Prettier with ESLint.
- autoprefixer and postcss: Autoprefixer automatically adds vendor prefixes to CSS, while PostCSS provides a way to transform CSS with JavaScript.
- cssnano: A tool that helps to compress and optimize CSS files.
- postcss-nesting: A PostCSS plugin that allows you to use modern CSS Nesting in your stylesheets.
- vite-plugin-eslint: Integrates ESLint into the Vite build process for on-the-fly linting.
- the-new-css-reset: A modern, CSS reset for your styles.
- To start using this template, clone the repository with this command:
git clone https://github.com/Barata-Ribeiro/vite-vanilla-js-template.git
- Then proceed to the folder and install dependencies:
cd vite-vanilla-js-template
npm install
or
npm install -g degit # if you don't have degit installed...
#degit documentation at: https://github.com/Rich-Harris/degit
- Use 'degit' to create a folder project using this template:
degit Barata-Ribeiro/vite-vanilla-js-template your-project-name
- Then proceed to the folder and install dependencies:
cd your-project-name
npm install
After cloning the template, make sure to clean up and update the following:
- Remove the .git directory and run
git init
to clean the commit history. - Clean up the README.md file.
- Adapt the LICENSE file to your project.
- Delete
public/vite.svg
,public/screenshot
,src/assets/images/javascript.svg
, andsrc/assets/images/vite.svg
. - Delete the content from
src/styles/style.css
. - In the
src/js/main.js
file, leave only these import statements:import "../../styles/style.css";
andimport "the-new-css-reset/css/reset.css";
. - Adapt the
package.json
file with your project's own information. - Delete the .github folder.
Use the following scripts for your development workflow:
# Start the development server
npm run dev
# Checks your code for any linting errors
npm run lint
# Tries to automatically fix any linting errors present in your code
npm run lint:fix
# Formats your code in a consistent, predefined style using Prettier
npm run format
# Build for production
npm run build
# Preview the build
npm run preview
# Build and preview the project
npm run buildpreview
This is the structure of the project:
/
├── .github # Github actions and workflows
├── node_modules # Node.js dependencies for the project.
├── public # Public assets and resources
├── src # Source code
│ ├── assets # General assets for your project
│ │ ├── images # Store your images here
│ ├── js # Javascript files of your project
│ ├── styles # CSS styles for your project
├── .editorconfig # Configuration for the EditorConfig plugin
├── .eslintignore # Files to be ignored by ESLint
├── .eslintrc.json # Configuration for ESLint
├── .gitignore # Files and folders to be ignored by Git
├── .prettierignore # Files to be ignored by Prettier
├── .prettierrc # Configuration for Prettier
├── index.html # The HTML file for your project
├── LICENSE # The license for your project
├── package-lock.json # Lockfile for your project's dependencies
├── package.json # Defines your project and its dependencies
├── postcss.config.cjs # Configuration for PostCSS
├── README.md # This file
├── vite.config.js # Configuration for Vite
This template was created under the MIT License.
Happy coding! 👨💻