乐趣区

关于前端:规范代码编写风格就用-eslint-和-prettier

jiezi

eslint 能够用于标准咱们的编码，使得我的项目中的代码格调统一，更利于浏览和保护，而 prettier 能够在当咱们代码不合乎 eslint 标准是进行局部主动修复。

eslint

通过 npm install eslint -D 装置 eslint，而后执行 npx eslint --init 初始化配置文件

在执行 init 操作的时候，eslint 生成配置文件会问你一些问题

  • 想怎么来应用 eslint
  • 模块化的形式（Es module、commonjs）
  • 抉择哪一种框架（React、Vue）
  • 是否须要 TypeScript
  • 我的项目运行在浏览器还是客户端
  • 指定怎么的代码标准（Airbnb、Standard、Google、XO）
  • 生成的配置文件类型（JavaScript、YAML、JSON）

顺次抉择实现后再让它主动装置所须要的依赖。

在这些问题中，我抉择了 应用 eslint 时查看代码发现问题后并揭示、模块化应用 commonjs、不须要框架和 TypeScript、我的项目运行在浏览器端，应用 airbnb 编码标准，生成配置文件为 JavaScript，这样就生成了 eslint 配置文件 .eslintrc.js

  • env 示意以后 eslint 代码运行在什么环境
  • extends 示意继承的规定
  • parserOptions 里定义了 反对的 ecmaScript 版本
  • rules 中能够自定义规定

有了这些规定之后，通过命令 npx eslint ./src/index.js 来校验文件，根据 airbnb 的规范，五行代码检测出了六个谬误和一个正告。

通过命令一个文件一个文件检测效率会比拟低，在我的项目中能够间接配置 loader 来解决

eslint-loader

通过 npm install eslint-loader -D 装置依赖，在 webpack.config.js 中配置 eslint-loader 对立解决 js 文件 

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['eslint-loader'],
    },
  ],
},

执行 npm run build，当文件有谬误时，将不会通过编译

vscode 插件

既然 eslint 检测出这么多谬误，那咱们得解决问题，使代码符合规范。

以上报错和正告能够演绎为

  • quotes：Strings must use singlequote，示意必须应用单引号
  • semi：Missing semicolon，示意行尾少了分号
  • no-unused-vars，定义变量但没有应用
  • no-console，不冀望应用 console 语句
  • import/prefer-default-export，倡议应用默认导出

其中无论是 eslint 工具还是 eslint-loader 报错代码都有提醒 “4 errors and 0 warnings potentially fixable with the ‘–fix’ option”。

那咱们通过 –fix 解决这个文件，通过 npx eslint --fix ./src/index.js 来执行，发现此时只剩工具帮咱们修复了局部谬误，包含行尾分号以及字符串单引号。

像下面的代码，在编写的过程中可能也不晓得哪里有谬误，如果平时编写代码的时候，能有不符合规范的谬误提醒，以及对于局部不标准代码能主动修复的话，比方双引号转换单引号，会给开发带来比拟大的便当。

vscode 中插件能够达到这样的成果，ESLint 用于报错揭示，Prettier 用于代码格式化。

ESLint 工具会读取本地的 eslint 配置，对文件进行报错和正告，标红表明 ”error”，黄色下划线示意 ”warn”。

prettier 主动格式化代码须要咱们做一些配置，能够在 vscode 中通过 Settings 设置代码格式化规定，抉择后会主动增加到 setting.json 中，比方单引号代替双引号。

prettier 还能够在配置文件 .prettierrc 中进行我的项目的代码格式化标准，比方宽度超过 100 主动换行。

配置实现后，就能够通过快捷键主动格式化啦~

修复谬误

无奈通过工具主动修复的代码就只能本人手动来解决，咱们能够通过三种形式来修复谬误

  • 批改谬误源代码
  • 将谬误揭示敞开或者设置为 ”warn”
  • 将谬误配置为我的项目中所须要的格局

在 .eslintrc.js 里 rules 属性中配置自定义的规定，规定有三种抉择形式，”off” 或 0 代表敞开校验，”warn” 或 1 代表不报错只正告，”error” 或 2 代表报错

  • 比方不心愿有 console 语句，间接将 console 语句移除
  • 定义变量但没有应用不要报错只是正告 ‘no-unused-vars’: ‘warn’
  • 应用双引号报错，默认是单引号，但咱们批改规定我的项目中的字符串就应用双引号 quotes: [2, ‘double’]

通过 –fix 或者 prettier 主动修复之后，还剩两个谬误和一个正告

正告不影响文件的编译，另外两个报错能够设置为敞开和正告 

rules: {
  'no-unused-vars': 'warn',
  'import/prefer-default-export': 0,
},

再次运行 npm run build，只剩两个正告，能够通过编译，代码也不再标红。

eslint 和 prettier 在前端工程化方向有很大的作用，能够缩小开发谬误，帮忙团队中造成比拟统一的编码格调。

以上就是 eslint 和 prettier 相干的总结，更多无关 webpack 的内容能够参考我其它的博文，继续更新中~

退出移动版