代码格式化+ESLint校验完整过程及踩坑记录-五八三

前言

开发过程中，减少重复无意义操作，避免低级错误，有效控制项目代码质量和规范，提高开发效率的利器！

代码格式化是什么？

代码格式化是将代码变得整洁美观的行为。

为什么要统一格式化代码？

代码格式化可以将一些简单重复的操作交给程序来完成。
在团队协作中，如果每个人的格式化方案不同，就会导致大家的代码经常产生大量因格式化造成的代码变更，还很容易导致代码冲突。
于是，为了避免这种情况，在团队协作中，一般会约定统一的格式化方案，共用一套规则以便开发。

怎么设置格式化

插件工具: vetur/Prettier + ESLint
Prettier：代码风格控制工具
ESLint：语法检测工具

代码风格控制工具

首先需在扩展工具中安装ESLint、Prettier和Vetur插件

Settings设置

ctrl+, 在Settings中进行相关设置

Vetur

这一步主要是为了设置 .vue 模板文件中各个部分要遵循的格式化规则。注意：在这里只利用 vetur 来处理 .vue 模板中的代码格式化，

Text Editor

去掉 Detect Indentation 勾选，否则会以打开文件的缩进模式，覆盖已设置（Insert Space）模式，导致js文件的缩进不符合预期。

勾选 Format On Save 后在保存时自动格式化当前页代码

ESLint

不要勾选ESLint格式化（默认不勾选），否则会和VScode格式化功能冲突

注意：整个编辑器应该只保留一个格式化工具！如果同时开启了两个及以上格式化工具，例如同时开启编辑器默认的格式化和 ESLint 的格式化，那就会冲突！

Prettier

VSCode中的Setting相关设置基本满足大部分开发中的格式化需求，如需更多的自定义设置，可以使用Prettier进行补充。
创建.prettierrc文件，添加相关规则设置，例：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "proseWrap": "preserve",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "trailingComma": "es5"
}

更多Prettier相关设置，详请参见 Prettier

语法检测 – ESLint

settings.json文件配置

指定校验生效的文件格式。

"eslint.validate": [
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact"
  "vue",
]

.eslintrc.js文件配置

安装

npm install eslint -D

添加.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  // 小程序或app解决'uni'/'wx' is not defined.问题
  globals: {
    uni: true, 
    wx: true
  },
  rules: {
    'import/no-duplicates': 0,
    'no-dupe-args': 2, // 函数定义的时候不允许出现重复的参数
    'no-dupe-keys': 2, // 对象中不允许出现重复的键
    'no-empty': 0, // 不允许出现空的代码块
    'no-redeclare': 2, // 不允许变量重复声明
    'no-undef': 2, // 不允许未声明的变量
    'no-unused-vars': [2, { vars: 'all', args: 'after-used' }], // 不允许有声明后未使用的变量或者参数
    'no-use-before-define': [2, 'nofunc'], // 不允许在未定义之前就使用变量
    'no-multiple-empty-lines': [2, { max: 2 }], // 空行最多不能超过两行
  },
};

rules中的规则根据自身项目需要设置，祥请参见 ESLint

可能遇到的问题

eslint不生效

查看编辑器底部状态栏的ESLint，若旁边有警告图标表示文件内容有问题，可点击进入OUTPUT查看Error详情，直至正常运行（警告图标消失）。

可在settings设置中搜索eslint，勾选Eslint: Always Show Status将ESLint运行状态显示在status bar上

`module`报错: ‘module’ is not defined

env: {

  node: true,
}

`async`方法报错：eslint Parsing error: Unexpected token

env: {

  es6: true,
  node: true,
},
parserOptions: {
  ecmaVersion: 'latest',
},

`import`报错：Parsing error: ‘import’ and ‘export’ may appear only with ‘sourceType: module’

parserOptions: {

  sourceType: 'module',
},

vue文件第一行`<`报错: Parsing error: Unexpected token <

方法一：

安装

 npm install vue-eslint-parser -D

.eslintrc.js文件

parser: 'vue-eslint-parser',

方法二：
安装

npm install @babel/eslint-parser -D