Novicell ESLint config for Vue 3 with TypeScript

This is an ESLint config for Vue 3 projects with TypeScript.

How to install

1. npm i eslint @novicell/eslint-config-vue

2. Create a .eslintrc.json in the root of the project

3. Add the following 👇

   {
     "extends": "@novicell/eslint-config-vue",
     "rules": {
       // Your project specific rules or overrides
     }
   }

4. Add lint scripts to package.json

   "scripts": {
     "eslint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore .",
     "eslint:fix": "eslint --ext .js,.vue,.ts --ignore-path .gitignore . --fix",
   }

5. Make VS Code autofix issues on save (optional)

   • Create a .vscode folder in root and add settings.json to it. Remember to disable Prettier!
   • Add the following

    {
      "css.validate": false,
      "less.validate": false,
      "scss.validate": false,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
      },
      "prettier.enable": false
    }
   

6. Configure webpack to autofix eslint issues during build (optional)

   extend (config, { isDev, isClient }) {
     if (isDev && isClient) {
       config.module.rules.push({
         enforce: 'pre',
         test: /\.(js|vue|ts)$/,
         loader: 'eslint-loader',
         exclude: /(node_modules)/,
         options: {
           fix: true
         }
       });
     }
   }

Contribution

Looking to contribute something? Here's how you can help. Please take a moment to review our contribution guidelines in order to make the contribution process easy and effective for everyone involved.

License

The Novicell CSS Utils is licensed under the MIT license. (http://opensource.org/licenses/MIT)