ESLint fix-on-save for VSCode

00-README.md

ESLint fix-on-save for VSCode

This brief guide will enable fix-on-save in VScode for js and vue files.

Install ESLint

ESLint needs to be installed twice: once inside your project and once globally.

# Install globally
$ npm install -g eslint

# Install in project
$ cd ~/src/my-project
$ npm install eslint

Config ESLint

Next, in your project directory, run npx eslint --init. Follow the prompts to set up ESlint per your project needs. For my needs, I selected:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript

After installing additional packages, a config file (.eslintrc.js) should generated.

VSCode Setup

• First, install the ESLint plugin: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint.
• Next, add a workspace config file to enable save-on-exit .vscode/settings.json.
• Finally, restart VSCode and test.

eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "vue"]
 }