chore(chapter2): configure compatible lint tooling

Use the Next.js-compatible ESLint 9 toolchain, add CSS linting scripts and dependencies, and export the Stylelint config through a named constant.

chapter2/package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "rimraf .next && next dev --turbopack",
-    "build": "next build",
+    "build": "rimraf .next && next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "pnpm lint:es && pnpm lint:style",
+    "lint:es": "eslint . --fix",
+    "lint:style": "stylelint \"**/*.css\" --fix --cache --cache-location node_modules/.cache/stylelint"
   },
   "dependencies": {
     "next": "16.3.3",
@@ -14,13 +16,30 @@
     "react-dom": "19.2.8"
   },
   "devDependencies": {
+    "@eslint-react/eslint-plugin": "^5.18.6",
+    "@eslint/eslintrc": "^3.3.6",
+    "@next/eslint-plugin-next": "^16.3.3",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "^9",
+    "eslint": "^9.39.5",
     "eslint-config-next": "16.3.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-perfectionist": "^5.10.1",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.5",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "prettier": "^3.9.6",
+    "stylelint": "^17.14.1",
+    "stylelint-config-css-modules": "^4.6.0",
+    "stylelint-config-recess-order": "^7.8.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-prettier": "^5.0.3",
     "tailwindcss": "^4",
     "typescript": "^5"
   },

chapter2/stylelint.config.mjs

@@ -0,0 +1,93 @@
+/** @type {import('stylelint').Config} */
+const stylelintConfig = {
+    extends: [
+        'stylelint-config-standard',
+        'stylelint-config-css-modules',
+        'stylelint-config-recess-order',
+        'stylelint-prettier/recommended',
+    ],
+    rules: {
+        'import-notation': 'string', // 使用string方式引入其它css文件，而不是url()
+        'selector-type-no-unknown': null,
+        'selector-class-pattern': null,
+        'custom-property-pattern': null,
+        'no-duplicate-selectors': null, // 取消禁止重复定义,这样可以在css module中单独定义变量
+        'block-no-empty': null, // 禁止出现空块
+        'declaration-empty-line-before': 'never',
+        'declaration-block-no-duplicate-properties': true, // 在声明的块中中禁止出现重复的属性
+        'declaration-block-no-redundant-longhand-properties': true, // 禁止使用可以缩写却不缩写的属性
+        'shorthand-property-no-redundant-values': true, // 禁止在简写属性中使用冗余值
+        'color-hex-length': 'short', // 指定十六进制颜色是否使用缩写
+        'comment-no-empty': true, // 禁止空注释
+        'font-family-name-quotes': 'always-unless-keyword', // 指定字体名称是否需要使用引号引起来 | 期待每一个不是关键字的字体名都使用引号引起来
+        // 'font-weight-notation': 'numeric', // 要求使用数字或命名的 (可能的情况下) font-weight 值
+        'function-url-quotes': 'always', // 要求或禁止 url 使用引号
+        'property-no-vendor-prefix': true, // 禁止属性使用浏览器引擎前缀
+        'value-no-vendor-prefix': true, // 禁止给值添加浏览器引擎前缀
+        'selector-no-vendor-prefix': true, // 禁止使用浏览器引擎前缀
+        'no-descending-specificity': null, // 禁止低优先级的选择器出现在高优先级的选择器之后
+        'at-rule-no-deprecated': null, // 禁止使用未知指令报错
+        'at-rule-no-unknown': null, // 禁止使用未知指令报错
+        'property-no-unknown': [
+            true,
+            {
+                ignoreProperties: [
+                    // CSS Modules composition
+                    // https://github.com/css-modules/css-modules#composition
+                    'composes',
+                ],
+            },
+        ],
+
+        'selector-pseudo-class-no-unknown': [
+            true,
+            {
+                ignorePseudoClasses: [
+                    // CSS Modules :global scope
+                    // https://github.com/css-modules/css-modules#exceptions
+                    'global',
+                    'local',
+                ],
+            },
+        ],
+        'rule-empty-line-before': [
+            // 要求或禁止在规则声明之前有空行
+            'always-multi-line',
+            {
+                except: ['first-nested'],
+                ignore: ['after-comment'],
+            },
+        ],
+        'at-rule-empty-line-before': [
+            // 要求或禁止在 at 规则之前有空行
+            'always',
+            {
+                except: ['blockless-after-same-name-blockless', 'first-nested'],
+                ignore: ['after-comment'],
+            },
+        ],
+        'comment-empty-line-before': [
+            // 要求或禁止在注释之前有空行
+            'always',
+            {
+                except: ['first-nested'],
+                ignore: ['stylelint-commands'],
+            },
+        ],
+    },
+    ignoreFiles: [
+        'public',
+        'node_modules',
+        'build',
+        '.history',
+        '.next',
+        '**/*.js',
+        '**/*.jsx',
+        '**/*.tsx',
+        '**/*.ts',
+        '**/*.json',
+        '**/*.md',
+    ],
+};
+
+export default stylelintConfig;