Clean Code from Day Zero: Setting Up ESLint and Stylelint for Vue.js Projects

Before diving into the development of any Vue.js project, it's crucial to setup two key tools: ESLint for JavaScript linting and Stylelint for CSS linting. Setting up these tools should be a priority, even before writing the first line of project code.

Let’s start with

// from https://vitejs.dev/guide/
pnpm create vite my-vue-app --template vue-ts

// or a package manager of your choice

Navigate to the official ESLint documentation at https://eslint.org/docs/latest/use/getting-started for the most up-to-date instructions. Follow the guide to set up ESLint according to your preferences and project requirements.

Also, some packages are offered to add.

pnpm add eslint @eslint/js eslint-plugin-vue globals typescript-eslint

With ESLint initialized, the next step is to set up and customize the ESLint configuration. It's time to create or modify the eslint.config.js

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";


export default [
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  ...pluginVue.configs["flat/strongly-recommended"],
  {
    languageOptions: { globals: globals.browser },
    rules: {
      "no-unused-vars": "error",
      "vue/max-attributes-per-line": ["error", {
        "singleline": {
          "max": 1
        },
        "multiline": {
          "max": 1
        }
      }],
      "vue/html-self-closing": ["never", {
      "html": {
        "void": "never",
        "normal": "always",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
    }
  },
];

Voilà, it's time to put it to the test. Running the command pnpm eslint . in a terminal will execute ESLint across the entire project. This command will scan all TypeScript (.ts) and Vue (.vue) files.

Adding Stylelint and SASS

Starts with executing these two commands in a terminal

pnpm add sass

pnpm add -D stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue

A simple .stylelintrc.json file is required in the root of the project directory.

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-standard-vue",
    "stylelint-config-standard-vue/scss",
    "stylelint-config-recommended-vue",
    "stylelint-config-recommended-vue/scss"
  ]
}

Technically, this is all that's needed before starting something new. It's crucial to complete the project setup before moving forward.

One small thing worth mentioning is Prettier. It's important to ensure that the ESLint configuration rules don't conflict with Prettier's formatting rules in the editor.

Conclusion

In conclusion, setting up a Vue project involves several steps. It's not just about creating the project; it's also about configuring ESLint and Stylelint to ensure code quality, consistency and developer convenience.

A Github example