@claylevering/claxon-lint (英语)
一个全面的ESLint插件,以ESLint平面配置格式(ESLint 9+)提供可共享配置,支持Vue,Node.js和TypeScript等项目. 包括Vue/Pinia开发模式的自定义规则.
技选
特征
- ESLint 9+平面配置格式 - 现代数组配置
- 多个预设 - 为您的堆栈选择配置 :
- 节点.js/贾瓦脚本
- 类型脚本
- 第3组
- Vue 3 + 类型脚本
- 数值 4
- Nuxt 4 + 类型脚本
- 自定义规则 - 关于Vue和Pinia发展的专门规则
- 默认 - 试验生产应用规则
安装
基地安装
所有项目都需要基包和ESLint:
pnpm add -D @claylevering/eslint-config eslint
特定框架的依赖性
根据您使用的配置, 安装相应的对等依赖 :
只针对节点.js/Java脚本
不需要额外的依赖! 基地安装已经足够.
用于类型脚本项目
pnpm add -D typescript-eslint
Vue 3 项目
pnpm add -D eslint-plugin-vue vue-eslint-parser typescript-eslint
说明: typescript-eslint 即使是纯JavaScript Vue项目也需要支持混合解析器,允许混合JS和TS组件.
用于 Nuxt 项目
pnpm add -D @nuxt/eslint eslint-plugin-vue vue-eslint-parser typescript-eslint
使用量
所有实例都使用 defineConfig() 来自 ESLint 软件包 创建平面配置阵列.
节点.js/JavaScript项目
创建 eslint.config.js 在您的工程根中 :
import { defineConfig } from 'eslint/config';
import claxxonLint from '@claylevering/eslint-config';
export default defineConfig([
...claxxonLint.configs['node'],
{
// Your custom configurations here
}
]);
类型脚本项目
import { defineConfig } from 'eslint/config';
import claxxonLint from '@claylevering/eslint-config';
export default defineConfig([
...claxxonLint.configs['typescript'], // Includes Node config + TypeScript rules
{
// Your custom configurations here
}
]);
Vue 3 项目
这个 vue 配置支持混合 JavaScript 和 TypeScript Vue 组件在同一项目中:
import { defineConfig } from 'eslint/config';
import claxxonLint from '@claylevering/eslint-config';
export default defineConfig([
...claxxonLint.configs['vue'], // Supports both JS and TS Vue components + standalone .ts files
{
// Your custom configurations here
}
]);
框架配置
处理特定框架时(如:. Nuxt) 仅仅传播配置可能并不总是可行的.
努克特项目
这个 eslint Nuxt 插件 装入 斯林特- 插图- vue
它们的插件 withNuxt() 如果存在不同的/相冲突的插件,则方法和 eslint 喜欢吐槽
在同一配置内。 我想你可以利用 FlatConfigComposer / 从
Nuxt 插件本身 但整个意图是
这个特殊的库 是为了让这个死屁股 尽可能简单的配置。 所以给你:
Nuxt 配置
import claxxonLint from '@claylevering/eslint-config';
import withNuxt from './.nuxt/eslint.config.mjs';
const claxxonNuxtConfig = claxxonLint.configs['nuxt'];
export default withNuxt({
// Your custom config options / objects
}).prepend([
/**
* Prepend the custom Claxxon configurations. This includes Node and Vue
* configurations but WITHOUT the Vue plugin itself so Nuxt/ESLint don't conflict.
* Supports both JavaScript and TypeScript Vue components.
*/
...claxxonNuxtConfig
]);
使用自定义规则
所有配置自动包括自定义规则. 使用个别习惯规则:
import claxxonLint from '@claylevering/eslint-config';
export default [
{
plugins: {
claxxon: claxxonLint
},
rules: {
'claxxon/pinia-store-top-level': 'error',
'claxxon/no-switch-statements': 'warn',
'claxxon/no-vue-global-imports': 'error',
'claxxon/pinia-store-pattern': 'error'
}
}
];
高级注释
虽然这些规矩已经被评为AF 但我承认有些人不喜欢 高级 而只是想要一些既定的安全规则(这完全可以). 这么说吧 如果你想加一句的话 页:1 埃斯林特- 配置- prettier {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}那两个 彼此和睦相处, 把它作为最后的东西 在你的配置。 这就是:
Vue w/更纯洁
import claxxonLint from '@claylevering/eslint-config';
import eslintConfigPrettier from 'eslint-config-prettier/flat';
export default defineConfig([
...claxxonLint.configs['vue'], // For Vue SFC files
{
// Your custom configurations here
},
eslintConfigPrettier // Prettier goes last to disable conflicting rules
]);
Nuxt + Prettier 键
import claxxonLint from '@claylevering/eslint-config';
import withNuxt from './.nuxt/eslint.config.mjs';
import eslintConfigPrettier from 'eslint-config-prettier/flat';
const claxxonNuxtConfig = claxxonLint.configs['nuxt'];
export default withNuxt({
// Your custom config options / objects
})
.prepend([
/**
* Prepend the custom Claxxon configurations. This includes Node and Vue
* configurations but WITHOUT the Vue plugin itself so Nuxt/ESLint don't conflict.
* Supports both JavaScript and TypeScript Vue components.
*/
...claxxonNuxtConfig
])
.append([
// Prettier goes last to disable conflicting rules
eslintConfigPrettier
]);
自定义
pinia-store-top-level
执行 Pinia 只在顶级范围存储定义,以防止在循环或条件中创建商店.
有效性 :
// Top-level in script setup
const myPiniaStore = useMyPiniaStore();
// In setup function
export default {
setup() {
const myPiniaStore = useMyPiniaStore();
}
};
无效 :
// Inside conditional
if (condition) {
const myPiniaStore = useMyPiniaStore(); // ❌ Error
}
// Inside loop
for (let i = 0; i < 10; i += 1) {
const store = useMyStore(); // ❌ Error
}
no-switch-statements
Disallows切换语句以防止掉入bug并改进可读性.
无效 :
switch (
value // ❌ Error
) {
case 1:
return 'one';
default:
return 'other';
}
有效性 :
if (value === 1) {
return 'one';
} else {
return 'other';
}
no-vue-global-imports
防止导入 Vue 3 编译器宏( S)defineProps, (中文(简体) ), defineEmits, (中文(简体) ), defineExpose, (中文(简体) ), defineOptions, (中文(简体) ), defineSlots, (中文(简体) ), defineModel, (中文(简体) ), withDefaults自动在 <script setup>这是一条补充规则 vue/no-import-compiler-macros。 。 。 .
说明: defineComponent 财务报告和审定财务报表 defineAsyncComponent 为: 没有 标记为必须导入的运行时函数 .
无效 :
import { defineProps, defineEmits } from 'vue'; // ❌ Error
有效性 :
// Compiler macros: just use them directly in <script setup>
const props = defineProps({...});
const emit = defineEmits(['update']);
// Runtime functions: these must be imported
import { defineComponent, defineAsyncComponent } from 'vue'; // ✅ OK
pinia-store-pattern
在访问属性前强制将存储定义为变量 .
无效 :
const userId = useMyPiniaStore().id; // ❌ Error
有效性 :
const myPiniaStore = useMyPiniaStore();
const userId = userStore.id;
内建规则配置
padding-line-between-statements (警报,自动固定)
为改进可读性,需要将空行绕入块语句(如果,同时切换,尝试). 这样可以防止代码被过度压缩,使控制流更容易被扫描.
前 (触发警告) :
const onClickEvent = () => {
if (!myMovieRef.value) {
return;
}
if (myMovieRef.value?.title_id) {
const title = myMovieRef.value?.title;
if (title) {
modalStore.openModal({ ... });
}
}
};
在(自动固定)之后:
const onClickEvent = () => {
if (!myMovieRef.value) {
return;
}
if (myMovieRef.value?.title_id) {
const title = myMovieRef.value?.title;
if (title) {
modalStore.openModal({ ... });
}
}
};
所需资源
- ESLint 语录 9.0.0或以上(依赖性较强,始终需要)
- 节点.js 18或以上(建议)
- 具体框架的一揽子措施 (可选对等者依赖性) :
typescript-eslint用于类型脚本支持的 QQ 8. 0. 0eslint-plugin-vue^ 10.0.0 用于 Vue 支持vue-eslint-parser^ 10.0.0 用于 Vue 支持@nuxt/eslint++ 1.0.0 用于 Nuxt 支持
只安装您的工程类型所需的软件包(见上文安装部分).
许可证
麻省理工学院