[英]How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?
[英]How to configure eslint and prettier with nuxt 3?
我已经安装了这些依赖项 Package.json:
{
"devDependencies": {
"@intlify/nuxt3": "^0.1.6",
"@nuxtjs/eslint-config": "^7.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"eslint": "^8.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.0.0",
"eslint-plugin-vue": "^7.20.0",
"nuxt3": "latest",
"prettier": "2.4.1",
"sass": "^1.43.3",
"vite-plugin-eslint": "^1.3.0"
}
}
at.eslintrc.js
extends: [
'eslint:recommended',
'plugin:nuxt/recommended',
'prettier'
],
在 nuxt.config.ts
import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
...
vite: {
plugins: [eslintPlugin()]
},
buildModules: ['@intlify/nuxt3', '@nuxtjs/eslint-module',],
})
这些选项都不适用于 nuxt 3。
一个简单的 ESLint + Prettier + TypeScript + Nuxt 3(或 Bridge)设置如下所示:
yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier @nuxtjs/eslint-config-typescript
.eslintrc.js
module.exports = {
root: true,
extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
}
package.json
{
"scripts": {
"lint": "eslint --ext .ts,.js,.vue ."
}
}
这是我在这里找到的配置: https://github.com/nuxt/framework/discussions/2815#discussioncomment-2050408
// .eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:@typescript-eslint/recommended",
"@nuxtjs/eslint-config-typescript"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {}
}
如果你真的想使用更漂亮的(imo eslint 已经完成了这项工作,同时使用这两种配置可能会很烦人)你可以添加 eslint-plugin-prettier 库,然后在 eslint 扩展中添加“plugin:prettier/recommended”。
我知道你正在使用什么 IDE 但如果它是 vscode,我建议你在保存时使用 linting 而不是依赖格式化程序(Volar,prettier,eslint-prettier)。 主要是因为它迫使所有开发人员具有相同的格式和规则
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.