eslint-config-hasseriis

Personal opnionated configuration of eslint for vue3 typescript projects, extending the following rules

'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-essential',

Installation

Scaffold vue3 project npm init vue@latest without eslint and prettier, then cd there and

npm install -D eslint-config-hasseriis
echo '{ "extends": [ "hasseriis" ], "rules": {} }' > .eslintrc.json 

May need to reload VSCode workspace afterwards (ctrl+shift+p+reload window).

Usage

Lint on filesave

Install eslint extension.

Add these sections to VSCode settings.json

  "[typescript][vue]": {
    "editor.formatOnSave": false,
  },  
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

Lint files "manually"

Add to package.json in script section

"scripts": {
  ...
    "lint": "npx eslint src/ --ext .ts,.vue",
    "lint:fix": "npx eslint src/ --ext .ts,.vue --fix"
},

and invoke by npm run lint and npm run lint:fix.

Experiment with rules locally

In root directory run

npm link
cd sample-project
npm link -D eslint-config-hasseriis

This installs a global symlink of the package. May need to reload workspace.

Remove the symlink later by npm rm eslint-config-hasseriis --global and verify it's not in npm list -g.

cd into the sample-project and run npm i -D ..\.

Publish package

Update version number and run npm publish.