DEV Community

Rafael Magalhaes
Rafael Magalhaes

Posted on • Originally published at blog.rrrm.co.uk on

How I set up eslint in my projects

Set up eslint and prettier in Nuxt

Create a project

npx nuxi init nuxt-lint
Enter fullscreen mode Exit fullscreen mode

install the dependencies after project is created

npm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: {},
};
Enter fullscreen mode Exit fullscreen mode

Create .prettierrc file

{
 "trailingComma": "es5",
 "singleQuote": true,
 "allowParens": "always",
 "printWidth": 100,
 "endOfLine": "auto"
}
Enter fullscreen mode Exit fullscreen mode

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

jetbrain ide adding new file watchers

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

duplicating file watchers

Top comments (0)