Optimize Your Vue 3 Project with ESLint and Prettier

Maintaining clean and consistent code is crucial for any development team. In this guide, we will explore how to set up ESLint and Prettier in a Vue 3 project, ensuring your code remains readable and maintainable. This setup not only improves individual productivity but also facilitates better collaboration among team members.

Setting Up Your Vue 3 Project

To start, create a new Vue 3 project using Vite. This modern build tool offers a fast development environment ideal for Vue applications.

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

With your project initialized, you can now integrate ESLint and Prettier.

Configuring ESLint

ESLint is a powerful tool for identifying and fixing problems in your JavaScript code. For our Vue 3 project, we will use ESLint with a flat configuration.

1. Install ESLint

   Begin by installing ESLint and the Vue plugin:

   npm install eslint eslint-plugin-vue --save-dev
   

2. Create ESLint Configuration

   Generate the configuration file using the following command:

   npx eslint --init
   

   Select options suitable for a Vue project. You will be prompted to choose features such as TypeScript or JavaScript, and module type.

3. Use Flat Config

   Adjust your .eslintrc.js to accommodate a flat configuration, which offers a more streamlined approach:

   module.exports = {
     extends: ["plugin:vue/vue3-recommended"],
     rules: {
       // Add custom rules here
     }
   };
   

Integrating Prettier

Prettier ensures your code is formatted consistently, which is essential for readability.

1. Install Prettier

   Add Prettier and its ESLint plugin:

   npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev
   

2. Configure Prettier

   Create a .prettierrc file with your preferred formatting rules:

   {
     "singleQuote": true,
     "semi": false
   }
   

3. Adjust ESLint for Prettier

   Update your .eslintrc.js to integrate Prettier:

   module.exports = {
     extends: [
       "plugin:vue/vue3-recommended",
       "plugin:prettier/recommended"
     ],
     rules: {
       // ESLint rules here
     }
   };
   

Setting Up VS Code for Auto-Format

Ensure your VS Code editor is configured to format your code automatically on save.

1. Install Extensions

   Install ESLint and Prettier extensions from the VS Code marketplace.

2. Configure Settings

   Add the following settings to your settings.json:

   {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }
   

Best Practices for Teams

Adhering to consistent code standards is vital for team efficiency. Here are some best practices:

• Regularly Update Linting Rules: Ensure your ESLint and Prettier configurations are up-to-date with the latest standards.
• Continuous Integration: Integrate these tools into your CI/CD pipeline to automate code quality checks.
• Team Agreement: Agree on a coding style guide and ensure everyone follows it.

Conclusion

Incorporating ESLint and Prettier into your Vue 3 project is a step towards cleaner, more maintainable code. This setup not only benefits individual developers but also fosters a collaborative environment where code quality is a shared responsibility. Implement these practices to enhance your development workflow and maintain high standards across your team.