Up to the time of publishing the article, the ESLint setup document on https://v3.nuxtjs.org is incomplete. This article notes how to setup ESLint + Prettier for Nuxt.js v3, the command line runs immediately after init project:
1 2 | npx nuxi init nuxt-app |
1. Install dependencies
1 2 | <span class="token function">yarn</span> <span class="token function">add</span> -D @nuxtjs/eslint-config-typescript eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier prettier typescript |
2. Add NPM script
Add script for convenience when checking eslint.
1 2 3 4 5 | <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> <span class="token property">"lint"</span> <span class="token operator">:</span> <span class="token string">"eslint . --ext .ts,.vue"</span> <span class="token punctuation">}</span> |
Use when checking eslint:
1 2 | <span class="token function">yarn</span> lint |
3. Config ESlint + Prettier
Create config files for ESLint + Prettier.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token punctuation">{</span> <span class="token property">"env"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"browser"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"es2021"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"node"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"extends"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"@nuxtjs/eslint-config-typescript"</span> <span class="token punctuation">,</span> <span class="token string">"plugin:nuxt/recommended"</span> <span class="token punctuation">,</span> <span class="token string">"plugin:prettier/recommended"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"rules"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"vue/multi-word-component-names"</span> <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token comment">// "vue/no-multiple-template-root": 0,</span> <span class="token property">"prettier/prettier"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"error"</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"singleQuote"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"semi"</span> <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* .output .nuxt node_modules dist *.local public # Editor directories and files .vscode <span class="token comment">/* !.vscode/extensions.json !.vscode/settings.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? </span> |
1 2 3 4 5 6 7 | <span class="token punctuation">{</span> <span class="token property">"tabWidth"</span> <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token property">"singleQuote"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"semi"</span> <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> |
Done.