【前端工程代码规范】

gogoing
166 阅读8分钟

VsCode

基础设置

  1. 保存格式化：点击设置 - 搜索 Format On Save 勾选；
  2. 搜索 Tab Size：输入 2

扩展推荐

Aya Vue3 extension Pack
综合性的扩展包，集成了多个用于增强 Vue 3 开发体验的工具，如包含 Vue3 Snippets 提供了一系列针对 Vue 3 的代码片段模板，帮助开发者快速编写常用结构和逻辑，减少重复劳动，提升编码速度和准确性2。

Vue Peek
提供了一系列针对 Vue 3 的代码片段模板，帮助开发者快速编写常用结构和逻辑，减少重复劳动，提升编码速度和准确性。

React Extension Pack
主要服务于 React 生态系统的构建

IntelliCode
利用了机器学习技术提供智能化建议，在输入过程中自动补全语句、预测函数参数等，从而加速编程流程并降低错误率。尽管名称中含有 “React”，但它同样支持多种前端框架和技术堆栈，包括但不限于 Vue。

Node.js Modules Intellisense
能够识别 node_modules 文件夹内的模块资源，并给予即时提示和支持，使得引入第三方库变得更加直观便捷。这对于任何基于 Node.js 构建的应用程序都非常有用，当然也涵盖了采用 Vue CLI 或 Vite 创建的服务端渲染场景下的需求。

Move TS - Move TypeScript
Move TS 工具允许用户轻松迁移 JavaScript 至 TypeScript 版本的文件，同时保持原有功能不变。随着越来越多的企业倾向于使用强类型的语言特性来进行更严谨的软件设计，这类辅助转换工具有助于平滑过渡到现代化的标准之上。

TypeScript Importer
自动处理导入声明管理任务，当检测到未解析成功的引用时会主动询问是否添加相应的路径映射或安装缺失的 npm 包，极大地提高了工作效率并且减少了潜在的人为失误风险。

json2ts
扩展提供了将 .js 文件批量转化为 .ts 文件的能力，同时还附带了一些额外选项来自定义转化行为，比如保留注释与否等问题。这有助于团队逐步推进整个工程向完全兼容 TypeScript 方向演进的过程。

Material Icon Theme
更换了默认图标样式，赋予每个文件类型独特的视觉标识符，不仅美观大方而且易于区分不同的文档类别，改善了整体用户体验感。

gitignore
协助生成合适的 .gitignore 文件内容，确保版本控制系统能够正确忽略不必要的本地缓存数据或其他不应该被提交至仓库中的条目，维护干净整洁的历史记录3。

Formatting Toggle
让程序员可以在保存文件时开启或关闭格式化功能，灵活应对不同场合下对代码风格一致性的要求。配合 Prettier 和 ESLint 使用效果尤佳，能够在保障质量的前提下实现高效协作

editor

安装扩展 EditorConfig for VS Code
有的内置支持的（如WebStorm ），有的需要独立安装。
文档网址：editorconfig.org

VS Code 的 EditorConfig 目前支持下列属性：

配置描述
[*]匹配全部文件，匹配除了 / 路径分隔符之外的任意字符串
charset设置字符编码，取值为 latin1，utf-8，utf-8-bom，utf-16be 和 utf-16le， utf-8-bom 不推荐使用
end_of_line设置使用的换行符，取值为 lf，cr 或者 crlf
indent_size设置缩进的大小，即缩进的列数，当 indexstyle 取值 tab 时，indentsize 会使用 tab_width 的值
indent_style缩进风格，可选space｜tab
insert_final_newline设为true表示使文件以一个空白行结尾
trim_trailing_whitespace删除一行中的前后空格

不同操作系统换行符不同

lf：全拼 Line Feed，意思是换行，用符号 \n 表示
cr: 全拼 Carriage Return， 意思是回车， 用符号 \r 表示
crlf：cr 和 lf 的结合，回车换行，用符号 \r\n

根目录创建 .editorconfig

# https://editorconfig.org
root = true # 根目录

[*] # 匹配全部文件
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space # 也可以 tab
insert_final_newline = true
trim_trailing_whitespace = true

[*.md] # 匹配全部 .md 文件
trim_trailing_whitespace = false

.vscode/extensions.json 进行编辑：

{ 
    "recommendations": ["editorconfig.editorconfig"] 
}

prettier

格式化代码，支持 json、js 格式、ts 可使用 cjs；
本质将代码转换为 ast 树再进行格化；
测试地址：prettier.io/playground/

安装 VS Code 插件和 prettier，--exact 指示使用精确的版本号进行安装

yarn add --dev --exact prettier

根目录创建配置文件, 如 .prettierrc.cjs

module.exports = {
  printWidth: 120, // 每行最大列
  useTabs: false, // 使用制表符而不是空格缩进
  tabWidth: 2, // 缩进
  semi: false, // 结尾不用分号
  singleQuote: true, // 使用单引号
  jsxSingleQuote: true, // 在JSX中使用单引号而不是双引号
  arrowParens: 'avoid', // 箭头函数里面，如果是一个参数的时候，去掉括号
  bracketSpacing: true, // 对象、数组括号与文字间添加空格
  trailingComma: 'none', // 尾随逗号
  jsxBracketSameLine: false // 在多行JSX元素最后一行的末尾添加 > 而不是另起一行
}

根目录创建配置 .prettierignore 文件

node_modules/**
dist/**
public/**
doc/**
*.md
coverage/**

.vscode

根目录新建 .vscode 文件夹，并于文件夹下新建 settings.json 文件

vscode 来支持保存后触发  prettier 格式化规则

  • 若配置 "prettier.requireConfig": true 则要求根目录下有 Prettier 的配置文件，它会覆盖 Prettier扩展 中的默认配置，否则保存时不会自动格式化。
  • 若配置 "prettier.requireConfig": false 则不要求根目录下有配置文件，若有的话也会被感知到并以配置文件的内容为准。
{
  "search.exclude": {
    "/node_modules": true,
    "dist": true,
    "pnpm-lock.yaml": true
  },
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.validate.enable": false,
}

package.json 的 "scripts" 脚本命令：用于运行 Prettier 工具来格式化指定目录下的文件

  • "--write": 将格式化后的结果直接写回原文件中
  • "--loglevel warn": 表示只输出警告级别的日志信息
  • 其余格式化的文件的路径以及文件扩展名
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,stylus,html,md}\""

ESlint

用于识别和报告ECMAScript/JavaScript代码中发现的模式的工具，目的是使代码更加一致并避免错误。
官方链接：eslint.org/docs/latest…
Node.js（^12.22.0、^14.17.0或>=16.0.0）

依赖描述
eslint-config-standard标准风格的 ESLint 预设规则
eslint-config-airbnbAirbnb 团队编码规范，包含许多最佳实践和限制
@typescript-eslint/parserTypeScript 专用ESLint解析器，支持TypeScript语法检查。（TS）
@typescript-eslint/eslint-plugin检查和修复 TypeScript 代码中的潜在问题和错误
eslint-plugin-reactreact 语法规则
eslint-plugin-import提供规则来帮助管理模块导入语句

根据自己的需求进行选择安装 standard / airbnb 二选一

pnpm add eslint eslint-config-standard eslint-plugin-import -D

React 相关

pnpm add eslint-plugin-react-hooks eslint-plugin-react -D

Typescript 相关

pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

根目录新建 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'standard', // 使用 Standard 规则
    'eslint:recommended', // 使用 ESLint 推荐的规则
    'plugin:react/recommended', // eslint-plugin-react 插件推荐的规则
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended', // eslint-plugin-import 插件推荐的规则
    'plugin:react-hooks/recommended' // eslint-plugin-react-hooks 插件推荐的规则
  ],
  parser: '@typescript-eslint/parser', // 指定 ESLint 解析器，用于解析 TypeScript 代码
  parserOptions: {
    ecmaFeatures: {
      jsx: true // 启用对 JSX 的支持
    },
    ecmaVersion: 'latest', // 指定 ECMAScript 版本，这里使用最新的版本
    sourceType: 'module' // 指定代码类型为模块
  },
  plugins: [
      'react', // eslint-plugin-react
      '@typescript-eslint', // @typescript-eslint/eslint-plugin
      'react-hooks', // eslint-plugin-react-hooks
      'import' // eslint-plugin-import
  ],
  rules: {}
}

其他依赖：

  1. eslint-plugin-jsx-a11y 检查和修复 JSX 元素的可访问性问题的规则；
  2. eslint-plugin-react-refresh 代码中识别到使用了 refresh() 函数的地方，并对这类代码提供特殊的处理，使其在编辑时能自动忽略潜在的语法错误，从而避免因为小的代码变动导致整个项目的重新编译，加快开发迭代速度
  3. eslint-plugin-promise 旨在提高异步代码质量的一组规则集合。通过对 Promise 使用情况施加约束条
  4. eslint-plugin-node 专门用于 Node.js 应用开发环境下的 linting 工具包。其主要目的是为了捕获一些常见的编程陷阱，并鼓励开发者采用更安全的方式处理文件系统操作和其他敏感 API 调用
"plugins": [
  "jsx-a11y", // eslint-plugin-jsx-a11y
  "react-refresh", // eslint-plugin-react-refresh
  'promise', // eslint-plugin-promise
  'node' // eslint-plugin-node
],

eslint-friendly-formatter 自定义化的报告生成器，能够按照个人喜好调整输出样式，Linter 结果更容易被理解和分享给团队成员或其他利益相关者查看

module.exports = {
  // ...
  formatter: require('eslint-friendly-formatter') // 配置 formatter
};

eslint-import-resolver-alias 自动处理模块路径别名的插件，简化了大型项目的依赖管理和路径查找 (ecma)

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      alias: true
    }
  }
};

ESLint v9

引入了一些新的特性和改进，其中包括对 Node.js 版本的要求提升以及一些内部架构上的调整。
Node.js（>=18.18.0）

pnpm create @eslint/config@latest

初始化过程

  • How would you like to use ESLint? To check syntax, find problems
  • What type of modules does your project use? 选择 JavaScript modules (import/export) 。
  • Which framework does your project use? 框架。
  • Does your project use TypeScript? 是否使用Typescript Yes
  • Where does your code run? Browser 和 Node 环境均选上
  • What format do you want your config file to be in? 选择 JavaScript ，即生成的配置文件是 js 文件
  • Would you like to install them now with npm? Yes

冲突

  • eslint-config-prettier 关闭所有与 Prettier 冲突的 ESLint 规则。使用 Prettier 来格式化代码
  • eslint-plugin-prettier 用于将 Prettier 作为 ESLint 规则运行。这意味着你可以使用 ESLint 来检查代码是否符合 Prettier 的格式化规则。

安装

pnpm install eslint-plugin-prettier eslint-config-prettier -D

配置文件 .eslintrc

module.exports = {
  // ...
  extends: [
    'plugin:prettier/recommended'
  ],
};

配置 .vscode/settings.json：

{
  // ...
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
}
avatar
文章
阅读
粉丝