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
Top comments (0)