VScode配置ESLint检测语法+Prettier代码格式化

admin管理员组

文章数量:1565813

文章目录

• • • 前言
    • 1. ESLint 支持几种格式的配置文件
    • 2. ESLint的数字代表
    • 3. VSCode 默认格式化配置
    • 4. Prettier 配置
    • 5. 如何解决 ESLint 与 Prettier 冲突？
    • 6. 友情链接

前言

作为一个开发人员，代码不好看可咋办？经常看到别人的代码一团糟，编译器右侧都是红点……
我们心里也是非常抓狂的……为什么维护的是我？
别慌，慢慢来~
首先，我们可以配置一些工具，帮助我们养成良好的编码习惯。
然后，熟练使用！这样编码风格就养成啦！
温馨提示：要安装好eslint扩展程序后再进行配置~

可以辅助安装 Prettier 进行代码风格管理。
配置文件可以是js文件，也可以是json文件，语法不同而已。
不能盲目的复制其他配置项，要看自己项目安装了哪些，以及是否需要。

• ESLint：语法检测工具
• Prettier：代码风格控制工具

看到如下代码会不会感觉好很多？特别整齐，没有爆红！
我这里配置的是TabSize=4，团队开发风格，没办法，咱也可以设置2个空格缩进哈。

1. ESLint 支持几种格式的配置文件

2. ESLint的数字代表

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

参考我的配置(.eslintrc.js)：

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  plugins: ['react'], // 这里增加prettier插件。
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  // parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'prettier/prettier': 'error', // prettier 检测到的标红展示
    'javascript.validate.enable': 1,
    // 禁止定义不使用的变量
    'no-unused-vars': 2,
    // suppress errors for missing 'import React' in files
    'react/react-in-jsx-scope': 'off',
    // allow jsx syntax in js files (for next.js project)
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], //should add ".ts" if typescript project
    'react/prop-types': 'off',
    indent: ['warn', 2],
  },
};

/**
  "off" 或 0 - 关闭规则
  "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */

3. VSCode 默认格式化配置

如图：可以选择用prettier 或者eslint等默认格式化。

4. Prettier 配置

vscode中的格式化可以按第3点进行配置，我一般用的prettier，一款很好的代码格式化插件，可自行安装。
它的默认格式化快捷键是：Alt + Shift + F（Windows）、shift + option + F(Mac)。配置文件：.prettierrc.js

module.exports = {
  singleQuote: true,
  semi: true, // 使用分号, 默认true
  useTabs: false, // 使用tab缩进，默认false
  tabWidth: 4, // tab缩进大小,默认为4或2
  arrowParens: 'always', // 箭头函数参数括号 默认avoid。avoid 能省略括号的时候就省略 例如x => x，always 总是有括号
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  printWidth: 100, // 一行的字符数，如果超过会进行换行，默认为80    
  trailingComma: 'none'// 去掉末尾的逗号
};

配置好之后重启编译器。以后编码完按快捷键，就可以自动按照改规则格式化啦！亲测有效！

使用 Prettier :

// 格式化所有文件
npx prettier --write .
  
// 格式化app目录下的所有文件
prettier --write app/

5. 如何解决 ESLint 与 Prettier 冲突？

在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；

比如：字符串单、双引号的配置，Eslint 把字符串变成单引号，再次编辑文件后，Prettier自动格式化后却又变成双引号，导致代码校验异常。

解决方式一：要么修改 eslintrc，要么修改 prettierrc 配置，让它们配置保持一致；

解决方式二：禁用 ESLint中和Prettier配置有冲突的规则；再使用 Prettier 来替代 ESLint 的格式化功能；

npm i eslint-plugin-prettier eslint-config-prettier -D

再配置 .eslintrc.js:

module.exports = {
  extends: [
    require.resolve('@hb/codestyle-linter/rcs/eslintrc.js'),
    'prettier'
  ],
  rules: {
  },
};

这两个包配合使用，可以达到运行 eslint --fix 时，采用Prettier的配置规则 来格式化文件。

6. 友情链接

（1）ESLint官网，可参考配置。
可以在这里搜索，如图所示：

看不懂的地方可以评论区讨论。

（2）关于我在eslint 配置中遇到的 问题。
（3） Prettier官网。

本文标签： 语法代码VSCodeeslintprettier