Setup ESLINT and PRETTIER in Vue3 - JavaScript Version

This article is base on
https://dev.to/markliu2013/how-to-create-a-vue3-application-with-webpack-javascript-version-2d93

We want to add eslint and prettier for the project.

Install Eslint and Prettier

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-vue

Create .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'prettier',
    'plugin:prettier/recommended',
    'plugin:vue/vue3-recommended'
  ],
};

Create .prettierrc.json

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none"
}

Run Eslint and Prettier

"lint": "eslint ./src --ext .js,.vue",
"lint:fix": "eslint ./src --ext .js,.vue --fix",
"format": "prettier 'src/**/*.{js,vue,css,md,json}' --write"