VScode配置ESLint检测语法+Prettier代码规范化

965 阅读3分钟

作为一个开发人员,代码不好看可咋办?经常看到别人的代码一团糟,编译器右侧都是红点…… 我们心里也是非常抓狂的……为什么维护的是我?别慌,慢慢来~ 首先,我们可以配置一些工具,帮助我们养成良好的编码习惯。 然后,熟练使用!这样编码风格就养成啦!

温馨提示:要安装好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"], // 兼容react
  plugins: ["react", "prettier"], // 这里增加插件。
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  // parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    "javascript.validate.enable": "warn",
    "react/jsx-uses-react": "error",
    // 禁止定义不使用的变量
    "no-unused-vars": [
      2,
      {
        vars: "all", // 变量定义必须被使用
        args: "none", // 对于函数形参不检测
        ignoreRestSiblings: true, // 忽略剩余子项 fn(...args),{a, b, ...coords}
        caughtErrors: "none", // 忽略 catch 语句的参数使用
      },
    ],
    // 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",
  },
};

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

3. VSCode 默认格式化配置

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

4. prettier 配置

vscode中的格式化可以按第3点进行配置,我一般用的prettier,一款很好的代码格式化插件,可自行安装。 它的默认格式化快捷键是:Alt + Shift + F。配置文件:.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
};

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

5. 友情链接

(1)ESLint官网,可参考配置。 可以在这里搜索,如图所示: eslint 看不懂的地方可以评论区讨论。

(2)关于我在eslint 配置中遇到的 问题

CSDN同文:blog.csdn.net/aaqingying/…