eslint +vscode 自动格式化代码

最新推荐文章于 2024-04-28 11:10:03 发布

Amao?

最新推荐文章于 2024-04-28 11:10:03 发布

阅读量4.5k

点赞数 2

文章标签： vscode javascript

本文链接：https://blog.csdn.net/weixin_47338877/article/details/122973836

版权

eslint +vscode 自动格式化代码

介绍

在react 用了一些较为实用的ESlint规则 ,并且使其vscode保存时自动格式化代码
同时部分高亮设置介绍使用的ESlint主要是代码格式这一块后续会持续补充

项目的前期准备

1. vscode 装上 eslint 插件

2.若新项目需添加依赖包的情况

–save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了。

npm install eslint --save-dev

3 package.json设置

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src",
    "lint:create": "eslint --init"
    "lint:fix": "eslint src --fix",
}

“lint:create”: “eslint --init” 这个脚本是为了生成 .eslintrc.js 文件，在介绍 Lint 的时候说到 Lint 应该提供编码规范，规范写在哪里，就写在这个文件，所以我们需要创建它；
“lint”: “eslint src” 在介绍 Lint 的时候也说到 Lint 应该提供自动校验代码的程序，这个脚本是让 Lint 自动检验 src 目录下所有的 .js 文件。 （！这个后续将不需要，因为这里我们用到了保存自动格式化代码）
"lint:fix"加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。可惜的是 --fix 只能修复基础的不影响代码逻辑的错误 (！这个后续将不需要，因为这里我们用到了保存自动格式化代码）

4.配置 .eslintrc.js 文件

终端输入 npm run lint:create 根据你所需要的选项配置相应的 .eslintrc.js 文件
一般都是

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

配置解释：
env、parserOptions、plugins
这三个放在一起将是因为你只需要知道它们是干嘛的：我的程序里要用到 ES6 、React 、JSX 语法，这几个属性就是让 Eslint 能够检验到这些语法的。其余的你不需要知道更多的哪怕一丢丢的东东了。
作者在学习之初在这块浪费了很多时间，官方文档看了很多遍，大多不能理解什么意思，后来想它既然提供这么一个自动生成配置文件的工具，并且是命令行交互的方式，我只需要告诉它我要用 ES6 、React 、JSX 语法，它会自动进行相关配置满足我的要求即可。

extends检验代码遵循编码规范
如果觉得官方提供的默认规则不好用，可以自定义规则配置文件，然后发布成 Npm 包，eslint-config-airbnb 就是别人自定义的编码规范，使用 npm 安装后，在我们自己的 .eslintrc.js 中进行配置 “extends”: “airbnb”，eslint-config 这个前缀可以省略不写，这样我们就使用了 eslint-config-airbnb 中的规则，而不是官方的规则 “extends”:“eslint:recommended” 了。关于如何创建自定义规则配置并共享可以参考：如何自定义规则配置

我用的是就是爱彼迎的代码规范。关于 “airbnb” 编码规范说两句，在接触到大多数开源项目中，大多数的作者都会使用 “airbnb” 编码规范而不是官方的 “extends”: “eslint:recommended” 编码规范。如果我们觉得 eslint-config-airbnb 规则配置中个别规则并不符合当前项目的要求，可以直接在 .eslintrc.js 配置 rules 属性，优先级高于共享规则 airbnb。
！当然如果觉得官方提供的规则都不好用，可以自定义规则配置文件，然后发布成 Npm 包，eslint-config-airbnb 就是别人自定义的编码规范
rules
配置文件也生成了，我们怎么知道我们的系统会遵循什么规则呢？？
ESLint 附带有大量的规则，修改规则应遵循如下要求：
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
有的规则没有属性，只需控制是开启还是关闭，像这样：“eqeqeq”: “off”，有的规则有自己的属性，使用起来像这样：“quotes”: [“error”, “double”]，具体有没有自带属性，可查看 eslint规则表。

rules 常用规则这里我将持续收集补充。

 'rules': {
    'no-debugger': 'error',
    'no-console': [2, { 'allow': ['error', 'warn'] }],  //只允许输出console.error() console.warn()
    'no-multiple-empty-lines': [1, { 'max': 1 }], //空行最多不能超过两行,
    'space-after-keywords': [0, 'always'],//关键字后面是否要空一格
    'space-before-blocks': [2, 'always'],//不以新行开始的块{前面要不要有空格
    'space-before-function-paren': [2, 'always'],//函数定义时括号前面要不要有空格
    'space-in-parens': [0, 'never'],//小括号里面要不要有空格
    'space-infix-ops': 0,//中缀操作符周围要不要有空格
    'space-unary-ops': [0, { 'words': true, 'nonwords': false }],//一元运算符的前/后要不要加空格
    'spaced-comment': 0,//注释风格要不要有空格什么的
    'func-call-spacing': [2, { 'allowNewlines': true }],//函数名称和调用它的括号之间插入可选的空白
    'no-trailing-spaces': 2, //一行最后不允许有空格,
    'no-empty': 2, //不允许出现空的代码块
    // "no-extra-parens": 2, //不允许出现不必要的圆括号
    'no-extra-semi': 2, //不允许出现不必要的分号
    'no-func-assign': 2, //不允许重新分配函数声明
    'no-irregular-whitespace': 2, //不允许出现不规则的空格
    'no-sparse-arrays': 2, //数组中不允许出现空位置
    'camelcase': [2, { 'properties': 'never' }], //制驼峰命名规则
    'semi': [2, 'always'],//语句强制分号结尾
    'semi-spacing': [0, { 'before': false, 'after': true }],//分号前后空格
    'quotes': [1, 'single'],//引号类型 `` "" ''
    'quote-props': [2, 'always'],//对象字面量中的属性名是否强制双引号
    'padded-blocks': 0,//块语句内行首行尾是否要空行
    'operator-linebreak': [2, 'after'],//换行时运算符在行尾还是行首
    'arrow-parens': 2,//箭头函数用小括号括起来
    'arrow-spacing': [2, { 'before': true, 'after': true }],//=>的前/后括号
    'comma-dangle': [2, 'never'],//对象字面量项尾不能有逗号
    'comma-spacing': 0,//逗号前后的空格
    'comma-style': [2, 'last'],//逗号风格，换行时在行首还是行尾
    'rest-spread-spacing': ['error', "never"],
    'implicit-arrow-linebreak': 2,// 强制隐式返回的箭头函数体的位置
    'prefer-const': 0,//首选const
  },

5 vscode 自动格式化代码

1）vscode setting设置

这里是vscode设置项

  // 保存时格式化
    "editor.formatOnSave": true,
      // 设置 eslint 保存时自动修复
    "eslint.autoFixOnSave": true,
      // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
        "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //一些高亮配置项
    //颜色配置
    "editor.tokenColorCustomizations": {
        "comments": "#858c99", // 注释
        "keywords": "#c678dd", // 关键字
        "variables": "#9fb2bf", // 变量名
        "strings": "#98c379", // 字符串
        "functions": "#e06c75", // 函数名
        "numbers": "#d19a66", // 数字
    },
    // 选中高亮的颜色
    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#4e8bda7e", //选中高亮
        // "editor.background": "#282c35", //背景色
        "editorCursor.foreground": "#bebebe", //编辑器光标颜色
        "editor.lineHighlightBackground": "#14524e", //光标所在行高亮内容的背景颜色
        "editor.lineHighlightBorder": "#00000000", //光标所在行四周边框的背景颜色
        "sideBar.background": "#21252b",
        "sideBar.foreground": "#b3bccc",
        "tab.inactiveBackground": "#21252b",
    },
        // tab 大小为2个空格
    "editor.tabSize": 2,
    // 字體大小
    "editor.fontSize": 14,
    // 設置行高
    "editor.lineHeight": 25,

2）.vscode文件夹

创建.vscode 文件夹，在里面创建setting.json 可以设置一些保存格式，代码风格。
extensions.json 是工作区推荐的插件

{
  "editor.formatOnSave": true,
  "prettier.requireConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}