提升代码的可读性和可维护性

forever_Mamba
1,267 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

代码的可读性，可维护性，可复用性

可读性

  1. 编码风格保持一致：单行注释、多行注释、链式代码换行格式、代码缩进、常量大写、使用 let const、箭头函数
  2. 代码清晰表达意图：命名语义化，使用熟悉的英文单词，
  3. 注释清晰，

可维护性

  1. 区分功能模块，模块清晰，业务模块和工具模块
  2. 目录结构
  3. 命名规范
  4. 适度拆分
  5. 尽量不要去写死代码，做成可配置的

可复用性

  1. 适度的封装
  2. 提取公共功能
  3. 独立形成小的单元
  4. 保持函数单一职责，灵活组合

编码规范

试想一下，在一个 team 中如果每个人的编码风格都是不同的，这种情况将是多么的可怕呢。为了最大限度的解决协同开发过程中的问题，比如：命名不规范、代码理解困难、代码执行效率低下。在代码交接的时候为了缩短时间、挺高阅读和理解效率，良好的统一的编码规则就显得尤为重要。

通常我们去做编码规则统一的方式都在项目中引入格式化工具（Prettier）和编码规则校验(ESLint)

Prettier

  1. 本地安装
npm install --save-dev --save-exact prettier
  1. 创建配置文件 .prettierrc，让编辑器知道正在使用 prettier
  2. 创建一个 .prettierignore 文件，让 Prettier CLI 和 编辑器 知道哪些文件不需要格式化。

.prettierignore 基于 .gitignore 和 .eslintignore（如果你有的话）

build/
lib/
es/
dist/
  1. 自己常用的 .prettierrc
{
  "singleQuote": true, // 使用单引号代替双引号
  "editor.tabSize": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "useTabs": false,
  "semi": false, //  仅在可能导致 ASI 失败的行的开头添加分号
  "jsxSingleQuote": false, // 在 JSX 中使用单引号代替双引号
  "bracketSpacing": true, // 在对象文字中的括号之间打印空格。true 示例：{ foo: bar }
  "bracketSameLine": false, // 将 > 多行 HTML（HTML、JSX）元素的 放在最后一行的末尾
  "proseWrap": "never",
  "arrowParens": "avoid", // 尽可能省略括号。例子：x => x
  "overrides": [
    {
      "files": ".prettierrc", // 让 Prettier 格式化自己的.prettierrc文件
      "options": {
        "parser": "json"
      }
    }
  ]
}

ESLint

几乎在所有的前端项目中都会用到 ESLint，大部分的编辑器都已经内置了。它可以静态分析我们代码中的问题，给出提示和快速解决方案。

  1. 本地安装
 npm install eslint --save-dev
  1. 运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建。

image.png 3. 自定义配置 规则

"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)
  1. 常用的规则
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react-hooks/rules-of-hooks': OFF,
    'react/no-array-index-key': OFF,
    'react/prefer-stateless-function': OFF,
    'import/named': OFF,
    'no-param-reassign': OFF,
    'react/sort-comp': OFF,
    'no-underscore-dangle': OFF,
    'eslint-comments/disable-enable-pair': OFF,
  },
};

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。

附：

avatar
文章
阅读
粉丝