Set up eslint and prettier in Nuxt

Create a project

npx nuxi init nuxt-lint

install the dependencies after project is created

npm install

Now let’s install some eslint packages

Add the following packages

npm i -D vue-tsc typescript prettier eslint-plugin-prettier eslint-config-prettier eslint @nuxtjs/eslint-config-typescript

Create .eslintrc.js file

module.exports = {
 root: true,
 env: {
   browser: true,
   es2022: true,
   node: true,
 },
 extends: ["@nuxtjs/eslint-config-typescript", "plugin:prettier/recommended"],
 parserOptions: {
   ecmaVersion: "latest",
   sourceType: "module",
 },
 rules: {},
};

Create .prettierrc file

{
 "trailingComma": "es5",
 "singleQuote": true,
 "allowParens": "always",
 "printWidth": 100,
 "endOfLine": "auto"
}

Now I just need to tell the IDE to lint file on save. I use one of the JetBrains IDE's.

Open settings -> tools -> File Watchers click on the + icon on the top right and select custom

current settings for the following fields:

• File type: Vue template
• Programs: $ProjectFileDir$\node_modules\.bin\prettier
• Arguments: --write $FilePathRelativeToProjectRoot$
• Output paths to refresh: $FilePathRelativeToProjectRoot$

that should be it. we can now create duplicates of this for each language you need to change the file type and select a language you want to lint e.g. JavaScript, TypeScript. make sure you select the level to global, this will then be available for all other projects. You will still have to enable them for each project