@jianhe/linter-configs 1.0.0

package/.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig
+# https://editorconfig.org/
+
+# 是否是顶级目录
+root = true
+
+# 匹配的文件类型
+[*]
+
+# 字符编码
+charset = utf-8
+# 缩进方式
+indent_style = space
+# 缩进大小
+indent_size = 2
+# 制表符宽度
+tab_width = 2
+# 换行方式
+end_of_line = lf
+# 是否删除行尾空白字符
+trim_trailing_whitespace = true
+# 是否在文件末尾插入一个最终新行
+insert_final_newline = true

package/.vscode/settings.json

@@ -0,0 +1,12 @@
+// VS Code Config
+// --------------------------
+
+{
+  // 是否在保存时格式化
+  "editor.formatOnSave": true,
+  // 是否在保存时修复错误
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  }
+}

package/README.md

@@ -0,0 +1,89 @@
+# FE Linter Configs
+
+## 当前仓库
+
+```shell
+# 安装依赖
+npm install
+npm install yalc -g
+
+# 发布
+npm run pub
+```
+
+## 项目仓库
+
+### 安装
+
+```shell
+# 从 npm 安装
+npm install linter-configs -D
+# 从 GitHub 安装
+npm install https://github.com/jianhee/linter-configs.git -D
+# 从 yalc 安装
+yalc add linter-configs -D
+```
+
+### 配置 VS Code
+
+把 `.vscode` 文件夹复制到项目根目录下
+
+### 配置 EditorConfig
+
+把 `.editorconfig` 文件复制到项目根目录下
+
+### 配置 Prettier
+
+在 `package.json` 中
+
+```json
+{
+  "prettier": "linter-configs/prettier"
+}
+```
+
+在配置文件中，比如 `.prettierrc`, `.prettierrc.json`, `.prettierrc.js`, `prettier.config.js`
+
+```js
+module.exports = require('linter-configs/prettier');
+```
+
+### 配置 ESlint
+
+在 `package.json` 中
+
+```json
+{
+  "eslintConfig": {
+    "extends": ["./node_moules/linter-configs/eslint/es6|html|vue2|vue3"]
+  }
+}
+```
+
+在配置文件中，比如 `.eslintrc.js`, `.eslintrc.json`
+
+```js
+module.exports = {
+  extends: ['./node_moules/linter-configs/eslint/es6|html|vue2|vue3']
+};
+```
+
+### 配置 StyleLint
+
+在 `package.json` 中
+
+```json
+{
+  "stylelint": {
+    "extends": ["linter-configs/stylelint/css|scss|html-css|html-scss"]
+  }
+}
+```
+
+在配置文件中，比如 `stylelint.config.js`, `.stylelint.js`, `.stylelint.json`
+
+```js
+module.exports = {
+  extends: ['linter-configs/stylelint/css|scss|html-css|html-scss']
+};
+```

package/eslint/es6.js

@@ -0,0 +1,10 @@
+// ESLint Config For ES6
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-standard'),
+    require.resolve('./modules/parser-babel'),
+    require.resolve('./modules/common')
+  ]
+};

package/eslint/html.js

@@ -0,0 +1,11 @@
+// ESLint Config For ES6 + HTML
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-standard'),
+    require.resolve('./modules/parser-babel'),
+    require.resolve('./modules/plugins-html'),
+    require.resolve('./modules/common')
+  ]
+};

package/eslint/modules/common.js

@@ -0,0 +1,105 @@
+// ESLint 基础配置
+// 文档：https://eslint.org/
+// 安装：npm install -D eslint
+
+module.exports = {
+  // 是否是顶级目录
+  // ESLint 会自动在文件目录中查找配置文件，从直系父目录开始，沿着目录结构依次向上，直到项目根目录或指定 `root: true` 时停止
+  root: true,
+
+  // 脚本的运行环境提供的预定义的全局变量
+  // 默认都是关闭的，常用的有以下几种
+  env: {
+    // 是否启用浏览器全局变量
+    browser: true,
+    // 是否启用 Node.js 全局变量和作用域
+    node: true,
+    // 是否启用除 modules 以外的所有 ECMAScript 6 特性
+    es6: true,
+    // 是否启用 jQuery 全局变量
+    jquery: true
+  },
+
+  // 脚本在执行期间访问的自定义的全局变量
+  // 默认为空，添加的变量可以设置为以下三种值
+  globals: {
+    // var1: "off",       // 禁用
+    // var2: "readonly",  // 只读
+    // var3: "writable",  // 可读写
+  },
+
+  // 可共享配置
+  // 添加可共享配置可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）并修改所有选项
+  // 格式：数组，后一项的优先级大于前一项，后一项的规则会覆盖前一项
+  // 值：默认为空，可选的值有以下三种
+  extends: [
+    'eslint:recommended' // 官方配置的名称：'recommended'（推荐规则）'all'（全部规则）
+    // 'standard',       // 第三方配置的名称
+    // './common.js'     // 本地配置文件的路径
+  ],
+
+  // 解析器
+  // 添加第三方解析器可以解析特定的语法
+  // 默认为 'Espree'，设置后需要同时配置 `parserOptions` 字段
+  parser: '',
+
+  // 解析器选项
+  parserOptions: {
+    // ECMAScript 版本：默认为 '3,5'，可设置为一个版本或一个年份
+    ecmaVersion: 'latest',
+    // ECMAScript 模式：默认为 'script'，可设置为 'module'（如果代码是 ECMAScript 模块）
+    sourceType: 'module',
+    // 额外的语言特性：默认都是关闭的
+    ecmaFeatures: {
+      // 是否允许在全局作用域下使用 return 语句
+      globalReturn: false,
+      // 是否开启全局 script 模式
+      impliedStrict: true,
+      // 是否支持 JSX 语法
+      jsx: true
+    },
+    // 使用 @babel/eslint-parser 解析时，是否需要 .babelrc 配置文件
+    requireConfigFile: false,
+    // 是否允许 import 和 export 语句出现在模块顶层以外的任意位置
+    allowImportExportEverywhere: false
+  },
+
+  // 插件
+  // 添加第三方插件可以提供额外的环境、配置和规则，或者提供额外的处理器从特定的文件中提取或转换 JavaScript 代码
+  // 默认为空，只能检测 .js 文件中的代码
+  plugins: [
+    // html
+    // vue
+    // ...
+  ],
+
+  // 启用或覆盖的规则及其各自的错误级别
+  // 默认所有规则都是禁用的，添加的规则可以设置为以下三种值
+  // 0/'off'    关闭规则
+  // 1/'warn'   启用并警告，不会导致程序退出
+  // 2/'error'  启用并报错，触发时会导致程序退出
+  rules: {
+    // 风格相关
+    // 对象属性的引号：如果有一个属性需要使用引号，那就全部都使用引号
+    'quote-props': ['error', 'consistent-as-needed'],
+    // 函数左括号之前的空格：禁止使用
+    'space-before-function-paren': ['error', { anonymous: 'always', named: 'never', asyncArrow: 'always' }],
+    // 语句末尾的分号：必须使用
+    'semi': ['error', 'always'],
+    // 换行风格
+    'linebreak-style': ['error', 'unix'],
+
+    // ES6 语法
+    // 使用模板字面量而非字符串连接
+    'prefer-template': 'error',
+    // 使用箭头函数作为回调
+    'prefer-arrow-callback': 'error',
+    // 箭头函数的参数圆括号：只有一个参数时不使用括号
+    'arrow-parens': ['error', 'as-needed'],
+
+    // 建议
+    // console/debugger：生产环境禁用
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+};

package/eslint/modules/extends-standard.js

@@ -0,0 +1,8 @@
+// Standard 可共享配置
+// 文档：https://www.npmjs.com/package/eslint-config-standard
+// 安装：npm install -D eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-n
+// 说明：用于 JavaScript Standard 风格的配置
+
+module.exports = {
+  extends: ['standard']
+};

package/eslint/modules/parser-babel.js

@@ -0,0 +1,8 @@
+// Babel 解析器
+// 文档：https://www.npmjs.com/package/@babel/eslint-parser
+// 安装：npm install -D @babel/core @babel/eslint-parser
+// 说明：用于检查所有有效的 Babel 代码。ESLint 默认的解析器和核心规则仅支持最新的正式 ECMAScript 标准，不支持 Babel 提供的实验性语法（如新特性）和非标准语法（如 Flow 或 TypeScript 类型）。Babel 解析器能让 ESLint 在 Babel 转换后的源代码上运行。
+
+module.exports = {
+  parser: '@babel/eslint-parser'
+};

package/eslint/modules/plugins-html.js

@@ -0,0 +1,8 @@
+// HTML 插件
+// 文档：https://www.npmjs.com/package/eslint-plugin-html
+// 安装：npm install -D eslint-plugin-html
+// 说明：用于解析 .html 文件的 <script> 标签中的代码
+
+module.exports = {
+  plugins: ['html']
+};

package/eslint/modules/plugins-vue.js

@@ -0,0 +1,45 @@
+// Vue 插件
+// 文档：https://eslint.vuejs.org/
+// 安装：npm install -D eslint-plugin-vue
+// 1.用于解析 .vue 文件的 <script> 和 <template> 标签中的代码
+// 2.提供针对 Vue 语法的 `vue-eslint-parser` 解析器
+// 3.提供针对 Vue 语法的的规则
+
+module.exports = {
+  // Vue 解析器
+  // 如果在 `parser` 字段中使用了其它解析器，需要移入 `parserOptions` 字段中以避免两个解析器产生冲突
+  parser: 'vue-eslint-parser',
+
+  // Babel 解析器移入这里
+  parserOptions: {
+    parser: '@babel/eslint-parser'
+  },
+
+  // Vue 插件
+  // 它和 HTML 插件都会从 <script> 标签中提取代码，所以需要在 `plugins` 字段中移除 'html' 以避免两个插件产生冲突
+  plugins: ['vue'],
+
+  // Vue 推荐规则
+  extends: [
+    // 'plugin:vue/recommended',      // Vue2 使用
+    // 'plugin:vue/vue3-recommended'  // Vue3 使用
+  ],
+
+  // Vue 规则
+  rules: {
+    // 目录和文件名：必须使用 kebab-case 写法
+    // 组件的命名：必须使用两个以上的单词
+    'vue/multi-word-component-names': 'off',
+    // 组件名称的写法：在单文件组件和字符串模板中使用 PascalCase 写法，在 DOM 模板中使用 kebab-case 写法
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    // 使用 === 而不是 ==
+    'vue/eqeqeq': ['error', 'always'],
+    // 使用模板字面量而非字符串连接
+    'vue/prefer-template': 'error',
+    // HTML 元素中的内容是否换行：多行时换行，单行时关闭校验
+    'vue/multiline-html-element-content-newline': 'error',
+    'vue/singleline-html-element-content-newline': 'off',
+    // HTML 闭合元素
+    'vue/html-self-closing': ['error', { html: { void: 'always' } }]
+  }
+};

package/eslint/vue2.js

@@ -0,0 +1,11 @@
+// ESLint Config For ES6 + Vue2
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-standard'),
+    'plugin:vue/recommended',
+    require.resolve('./modules/plugins-vue'),
+    require.resolve('./modules/common')
+  ]
+};

package/eslint/vue3.js

@@ -0,0 +1,11 @@
+// ESLint Config For ES6 + Vue3
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-standard'),
+    'plugin:vue/vue3-recommended',
+    require.resolve('./modules/plugins-vue'),
+    require.resolve('./modules/common')
+  ]
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jianhe/linter-configs",
+  "version": "1.0.0",
+  "description": "Linter Configs",
+  "main": "index.js",
+  "keywords": [],
+  "author": "jianhe",
+  "license": "ISC",
+  "homepage": "https://github.com/jianhee/linter-configs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jianhee/linter-configs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jianhee/linter-configs/issues"
+  },
+  "scripts": {
+    "pub": "node publish.js"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.9",
+    "@babel/eslint-parser": "^7.26.8",
+    "eslint": "^8.57.1",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "postcss-html": "^1.8.0",
+    "prettier": "^3.5.3",
+    "stylelint": "^16.15.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^6.0.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard-scss": "^14.0.0"
+  },
+  "devDependencies": {
+    "shelljs": "^0.10.0"
+  },
+  "prettier": "./prettier",
+  "eslintConfig": {
+    "extends": "./eslint/vue3"
+  },
+  "stylelint": {
+    "extends": "./stylelint/html-scss"
+  }
+}

package/prettier/index.js

@@ -0,0 +1,68 @@
+// Prettier Config
+// 文档：https://prettier.io/
+// 安装：npm install -D prettier
+
+module.exports = {
+  // 关联 JSON Schema 定义，提供智能提示和验证
+  $schema: 'https://json.schemastore.org/prettierrc',
+  // 每行最大字符数
+  printWidth: Infinity,
+  // 制表符宽度
+  tabWidth: 2,
+  // 是否使用制表符缩进（否则使用空格）
+  useTabs: false,
+  // 是否在语句末尾使用分号
+  semi: true,
+  // 是否使用单引号
+  singleQuote: true,
+  // 对象属性的引号：如果有一个属性需要使用引号，那就全部都使用引号
+  quoteProps: 'consistent',
+  // 是否在 JSX 中使用单引号
+  jsxSingleQuote: false,
+  // 对象和数组中的拖尾逗号：不使用
+  trailingComma: 'none',
+  // 是否在大括号内首尾添加空格
+  bracketSpacing: true,
+  // 是否将标签的反尖括号放在最后一行的末尾（否则需要换行）
+  bracketSameLine: false,
+  // 箭头函数的参数圆括号：只有一个参数时不使用括号
+  arrowParens: 'avoid',
+  // 文件格式化的范围：全部内容
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  // 是否在文件开头写特殊注释 @prettier
+  requirePragma: false,
+  // 是否在文件开头自动插入特殊注释 @prettier
+  insertPragma: false,
+  // Markdown 的折行标准：使用默认标准
+  proseWrap: 'preserve',
+  // HTML 的空格格式：可选的值有 1.'css'（根据显示样式）2.'strict'（保留空格）3.'ignore'（忽略空格）
+  htmlWhitespaceSensitivity: 'css',
+  // Vue 的 <script> 和 <style> 标签是否缩进
+  vueIndentScriptAndStyle: false,
+  // 换行方式
+  endOfLine: 'lf',
+  // 识别并格式化内嵌代码：自动
+  embeddedLanguageFormatting: 'auto',
+  // 是否给属性换行
+  singleAttributePerLine: false,
+  // 为指定的文件类型重写配置
+  overrides: [
+    // CSS 相关
+    {
+      files: ['*.css', '*.scss', '*.less'],
+      options: {
+        // 是否使用单引号
+        singleQuote: false
+      }
+    },
+    // Vue 相关
+    {
+      files: '*.vue',
+      options: {
+        // 是否给属性换行
+        singleAttributePerLine: true
+      }
+    }
+  ]
+};

package/publish.js

@@ -0,0 +1,27 @@
+// 发布
+import shell from 'shelljs';
+
+// 出错时退出进程
+shell.set('-e');
+
+// 更新版本号
+// shell.exec('npm version patch --no-git-tag-version'); // 小修复：1.0.0 → 1.0.1
+// shell.exec('npm version minor --no-git-tag-version'); // 新功能：1.0.0 → 1.1.0
+// shell.exec('npm version major --no-git-tag-version'); // 破坏性更新：1.0.0 → 2.0.0
+
+// Git 提交 + 推送
+// shell.exec('git add .');
+// shell.exec('git commit -m "update"');
+// shell.exec('git push');
+// console.log('✅ 已成功推送到 linter-configs 仓库');
+
+// npm 发布
+shell.exec('nrm use npm');
+shell.exec('npm publish --access public');
+shell.exec('npm info @jianhe/linter-configs');
+shell.exec('nrm use taobao');
+console.log('✅ 已成功推送到 npm');
+
+// yalc 发布
+// shell.exec('yalc push');
+console.log('✅ 已成功推送到 yalc');

package/stylelint/css.js

@@ -0,0 +1,10 @@
+// StyleLint Config For CSS
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-recess-order'),
+    require.resolve('./modules/extends-standard'),
+    require.resolve('./modules/common')
+  ]
+};

package/stylelint/html-css.js

@@ -0,0 +1,11 @@
+// StyleLint Config For SCSS + HTML/Vue
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-recess-order'),
+    require.resolve('./modules/extends-standard'),
+    require.resolve('./modules/extends-html'),
+    require.resolve('./modules/common')
+  ]
+};

package/stylelint/html-scss.js

@@ -0,0 +1,11 @@
+// StyleLint Config For CSS + HTML/Vue
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-recess-order'),
+    require.resolve('./modules/extends-standard-scss'),
+    require.resolve('./modules/extends-html'),
+    require.resolve('./modules/common')
+  ]
+};

package/stylelint/modules/common.js

@@ -0,0 +1,25 @@
+// StyleLint 基础配置
+// 文档：https://stylelint.io/
+// 安装：npm install -D stylelint
+// 说明：和 ESLint 规则类似
+
+module.exports = {
+  // 插件
+  plugins: [],
+
+  // 可共享配置
+  extends: [],
+
+  // 规则
+  rules: {
+    // 规则块前的空行：不使用
+    'rule-empty-line-before': 'never',
+    // 字体列表中是否缺少通用系列：不校验
+    'font-family-no-missing-generic-family-keyword': null,
+    // 是否允许特异性较低的选择器在特异性较高的选择器之后出现：不校验
+    'no-descending-specificity': null,
+    // 类名校验规则：必须以小写字母开头，后跟字母、数字、短横线、短横线
+    // 例如：.block, .block123, .block-modifier, .block--modifier, .block__element, .block__element--modifier
+    'selector-class-pattern': ['^[a-z][a-z0-9-_]+$']
+  }
+};

package/stylelint/modules/extends-html.js

@@ -0,0 +1,8 @@
+// HTML 可共享配置
+// 文档：https://www.npmjs.com/package/stylelint-config-html
+// 安装：npm install -D postcss-html stylelint-config-html
+// 说明：用于解析 .html/.xml/.vue/.svelte/.php 等文件的 <style> 标签中的代码
+
+module.exports = {
+  extends: ['stylelint-config-html']
+};

package/stylelint/modules/extends-recess-order.js

@@ -0,0 +1,8 @@
+// Recess Order 可共享配置
+// 文档：https://www.npmjs.com/package/stylelint-config-recess-order
+// 安装：npm install -D stylelint-config-recess-order
+// 说明：使用 Recess 和 Bootstrap 的风格给 CSS 属性排序
+
+module.exports = {
+  extends: ['stylelint-config-recess-order']
+};

package/stylelint/modules/extends-standard-scss.js

@@ -0,0 +1,9 @@
+// Standard SCSS 可共享配置
+// 文档：https://www.npmjs.com/package/stylelint-config-standard-scss
+// 安装：npm install -D stylelint-config-standard-scss
+// 1.扩展 stylelint-config-standard 共享配置，并针对 SCSS 调整其规则
+// 2.扩展 stylelint-config-recommended-scss 共享配置
+
+module.exports = {
+  extends: ['stylelint-config-standard-scss']
+};

package/stylelint/modules/extends-standard.js

@@ -0,0 +1,8 @@
+// Standard 可共享配置
+// 文档：https://www.npmjs.com/package/stylelint-config-standard
+// 安装：npm install -D stylelint-config-standard
+// 说明：扩展 stylelint-config-recommended 共享配置，并启用额外规则，以强制实施 CSS 和 Baseline Wider Available 中的现代规范
+
+module.exports = {
+  extends: ['stylelint-config-standard']
+};

package/stylelint/scss.js

@@ -0,0 +1,10 @@
+// StyleLint Config For SCSS
+
+module.exports = {
+  extends: [
+    // ...
+    require.resolve('./modules/extends-recess-order'),
+    require.resolve('./modules/extends-standard-scss'),
+    require.resolve('./modules/common')
+  ]
+};

package/test/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    a="1"
+    b="2"
+    c="3"
+    d="4"
+  >
+    {{ var1 }}
+    {{ var2 === 1 ? `a${1}` : '' }}
+    <TodoItem>123</TodoItem>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import TodoItem from './TodoItem';
+
+// 变量
+const var1 = ref(1);
+const var2 = ref({ a: 1, b: 1 });
+
+// 计算属性
+const foo = computed(() => {
+  return 1;
+});
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('onscroll', event => {});
+});
+
+// 方法
+const fn1 = () => {
+  const a = `a${1}`;
+  if (a === 1) {
+    console.log(a);
+  }
+};
+const fn2 = a => {
+  switch (a) {
+    case 1:
+      break;
+    case 2:
+      break;
+  }
+};
+</script>
+
+<style lang="scss">
+a {
+  margin: 0 auto;
+  color: #fff;
+}
+p {
+  font-size: 12px;
+  color: rgb(0 0 0 / 50%);
+}
+</style>