Cho tới thời điểm publish bài viết, phần document setup ESLint trên trang https://v3.nuxtjs.org chưa đầy đủ. Bài viết này note lại cách setup ESLint + Prettier cho Nuxt.js v3, các command line chạy ngay sau khi init project:
1 2 | npx nuxi init nuxt-app |
1. Cài đặt 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. Thêm NPM script
Thêm script để thuận tiện khi check 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> |
Sử dụng khi check eslint:
1 2 | <span class="token function">yarn</span> lint |
3. Config ESlint + Prettier
Tạo các file config cho 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.