竹海叶溪竹海深邃，泛泛叶溪

封面是学校操场旁的竹林，一个不起眼的小地方，有些人会在这休息。竹子很高大，也很奇怪，他在努力长大。

胡言乱语

天津之行

出差了半个月之久。也是第一次来到天津。感觉每次人都有幽默细胞，准确来说天津话自带幽默。天津景点很集中，基本上一两天可以逛完。总体来说这个城市近现代留下的痕迹很重，就像近现代的活化石，从天津你可以看到近现代历史活了起来。五大道近现代建筑群，各种近现代名人故居，还有租界。很多街道是很平整的石子路。而且有些街道很窄，但很有烟火气，颇有玉林的味道。那的人们对生活有自己的见解，很豁然的解读。生活不总是困难也偶尔伴随着小乐趣，也许这个城市就是这样对我说的。

值得分享

ESLint
检查 JavaScript 和 TypeScript 代码逻辑错误与规范问题的可插拔工具。
Prettier
专注于自动统一代码风格而非检查逻辑错误的强制性格式化工具。
Stylelint
用于避免样式错误并保持 CSS 代码风格一致性的现代检查工具。
EditorConfig
用于跨编辑器统一缩进、编码等基础编辑设置的配置文件标准。

编程手札

前端代码规范四件套

ESLint 管 JS 质量，Prettier 管代码格式，Stylelint 管 CSS 规范，EditorConfig 统一编辑器行为。

动手体验

初始化项目

bash

pnpm init -y
pnpm install -D eslint prettier stylelint editorconfig

配置 EditorConfig

创建 .editorconfig 文件

text

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

统一了编辑器，缩进和换行符始终一致

配置 ESLint

创建 .eslintrc.cjs 文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn'
  }
}

可以添加到 package.json

json

{
  "scripts": {
    "lint": "eslint src/**/*.{js,ts}",
    "lint:fix": "eslint src/**/*.{js,ts} --fix"
  }
}

配置 Prettie

创建 .prettierrc 文件

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

创建 .prettierignore 文件

node_modules
dist
coverage

可以添加到 package.json

json

{
  "scripts": {
    "format": "prettier --write src/**/*.{js,ts,css,md}"
  }
}

配置 Stylelint

创建 .stylelintrc 文件

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "indentation": 2,
    "string-quotes": "single",
    "color-named": "never"
  }
}

可以添加到 package.json

json

{
  "scripts": {
    "lint:css": "stylelint src/**/*.{css,scss}",
    "lint:css:fix": "stylelint src/**/*.{css,scss} --fix"
  }
}

整合 ESLint + Prettier

ESLint 和 Prettier 都可能格式化代码，有时需要关闭 ESLint 的格式规则

安装冲突解决包

bash

pnpm install -D eslint-config-prettier

同时修改 .eslintrc.cjs

module.exports = {
  extends: [
    'eslint:recommended',
    'prettier'  // 放在最后，关闭冲突规则
  ]
}

VS Code 集成

创建 .vscode/settings.json

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

可以安装同名插件使 VS Code 获得相应能力

运行

最终效果

bash

# 检查 JS 代码
pnpm run lint

# 自动修复 JS 问题
pnpm run lint:fix

# 格式化所有代码
pnpm run format

# 检查 CSS 代码
pnpm run lint:css

小结
配置这些工具看似繁琐实则繁琐，但确实规范了代码，提升了团队开发体验和效率。

清闲半日

美食：《蛋炒饭》
这么完美的蛋炒饭，难道我真的有做厨神的天赋😏
动漫：《死神ブリーチ》
死神作为民工三大漫画，整体来说确实是一个好动画。打斗特效都很养眼。但是部分打戏有些俗套，而且也没有逃离血缘论。
慢慢看很浪费时间了，推荐看解说补精彩部分。
发现：《网站》
前端工具的网站一个比一个好看，后端工具的网站像是上个世纪的，有些还没有😅

竹海叶溪竹海深邃，泛泛叶溪 ​

胡言乱语 ​

值得分享 ​

编程手札 ​

清闲半日 ​

竹海叶溪竹海深邃，泛泛叶溪

胡言乱语

值得分享

编程手札

清闲半日