eslint +vscode 自动格式化代码

Amao?
本文介绍了eslint +vscode 自动格式化代码相关内容,对大家解决问题具有一定的参考价值,需要的朋友们一起学习吧!

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"
  }
}

!!!!此外分享一个 ESlint rule项中文版 https://cloud.tencent.com/developer/section/1135820

该文章版权属于Amao?
摘录自:https://blog.csdn.net/weixin_47338877/article/details/122973836

这篇关于eslint +vscode 自动格式化代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!