精华内容
下载资源
问答
  • 主要介绍了VScode格式化ESlint方法(最全最好用方法),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等。 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持。 1. 安装 Vetur 插件 2. 在 VS Code 的...
  • 安装Eslint插件配置eslint,打开 文件==>首选项==>设置;配置Eslint在用户设置中插入配置代码(支持vue): "eslint.options": { "plugins": [ "html" ] }, "eslint.validate": [ "javascript", "jav...

    配置eslint

    • 插件扩展商店搜索 eslint,点击安装,并重新加载;
    2b543381975af44763fc8df2d132f4ab.png

    安装Eslint插件

    • 配置eslint,打开 文件==>首选项==>设置;
    f591f8934337c78a801ffdce9c1c7440.png

    配置Eslint

    • 在用户设置中插入配置代码(支持vue):
     "eslint.options": {    "plugins": [ "html" ] },  "eslint.validate": [    "javascript",    "javascriptreact",   "html",    "vue",   {      "language": "html",      "autoFix": true    },   {      "language": "vue",     "autoFix": true    }  ],  "eslint.autoFixOnSave": true,  "editor.tabSize": 2,

    此时,eslint就可以在项目中检测代码了

    eslint检测比较严格,若希望vue按照eslint格式化代码,进行以下操作:

    • 安装插件Vetur,这是vscode上一个vue.js代码提示,语法高亮等功能的流行插件;
    • 安装后在默认配置可以看到,vetur默认采用prettier格式化;
    9234c80a85db2063e64bdf22d0e33ab3.png
    • 安装插件prettier,但他的格式化并不和eslint一样,所以在用户配置中添加以下配置;
    //分号 "prettier.semi": false, //单引号包裹字符串 "prettier.singleQuote": true, //html格式化依赖 默认为none "vetur.format.defaultFormatter.html": "js-beautify-html",//函数前加空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //没有下边这个 上边不生效 "vetur.format.defaultFormatter.js": "vscode-typescript",

    vue扩展推荐

    • Vue VSCode Snippets
    • Vue 2 Snippets上面是两个很好用的vue代码片段
    • Better Comments 高亮你注释的扩展 比如:
    3ad98d9b2972c5ae5be6fd004695f862.png
    • css peek css转到定义
    • file peek file到定义
    展开全文
  • 背景协同开发时,因各人使用代码格式化不一致,diff 时就很难看出改动点在哪里看到 esint 报红就害怕,觉得上了 eslint 就像上了枷锁目标 少依赖,只需要开启 ESlint 即可 "零"配置,减少风格差异选择的争吵 全自动化,...

    背景

    • 协同开发时,因各人使用代码格式化不一致,diff 时就很难看出改动点在哪里
    • 看到 esint 报红就害怕,觉得上了 eslint 就像上了枷锁

    目标

    • 少依赖,只需要开启 ESlint 即可
    • "零"配置,减少风格差异选择的争吵
    • 全自动化,自动修复,保持原本的习惯即可

    所用知识点

    • ESLint
    • Prettier
    • EditorConfig
    • vscode

    效果

    1. 点击保存command + s / Ctrl + s后自动修复

    048ab6dbb854c8c6153c116eb8fe354c.png
    1. git commit时自动修复

    c8650d1447746072a12b79ccee35267b.png

    安装流程

    ESlint+Prettier 配置

    vue 项目

    vue add eslint

    22faada93cbd99beca47bcd37970f809.png
    注意:如果想要使用 git commit触发 lint操作功能
    这里可以通过空格来选择这个选项
    这里是多选的,非单选

    这个时候我们就会看到 Vue 帮我们创建了一个 eslint 配置文件

    // .eslintrc.js
    module.exports = {
      root: true,
      env: {
        node: true,
      },
      extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
      parserOptions: {
        ecmaVersion: 2020,
      },
      rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
      },
    };
    // package.json
    {
      "name": "demo-vue-eslint",
      "version": "1.0.0",
      "description": "",
      "author": "",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "lint": "vue-cli-service lint"
      },
      "main": "index.js",
      "devDependencies": {
        "@vue/cli-plugin-eslint": "^4.3.1",
        "@vue/eslint-config-prettier": "^6.0.0",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-vue": "^6.2.2",
        "lint-staged": "^9.5.0",
        "prettier": "^1.19.1"
      },
      "gitHooks": {
        "pre-commit": "lint-staged"
      },
      "keywords": [],
      "license": "ISC",
      "lint-staged": {
        "*.{js,jsx,vue}": ["vue-cli-service lint", "git add"]
      }
    }
    

    现在我们就可以通过

    npm run lint

    来格式化全部代码了

    因为这个脚本依赖于 vue-cli-service
    如果项目中缺少这个依赖就会报错
    这个时候我们只要添加这个依赖就可以了 sh npm i @vue/cli-service -D

    React 项目

    安装依赖

    1. 删除eslintCOnfig
    2. 安装依赖

    sh npm i babel-eslint eslint eslint-config-babel eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-standard prettier -D

    最终的效果图如下

    3a0719a4be40adcfbb07ae398e1e72af.png

    配置 Eslint

    // .eslintrc.js
    module.exports = {
      root: true,
      env: {
        browser: true,
      },
      extends: [
        "prettier",
        "prettier/standard",
        "prettier/react",
        "plugin:react/recommended",
      ],
      plugins: ["prettier"],
      rules: {
        "prettier/prettier": "error",
      },
      parser: "babel-eslint",
      settings: {
        react: {
          pragma: "React",
          version: "detect",
        },
      },
    };
    

    配置 git hook

    npm install pretty-quick husky -D
    注意:这里一定要确保提前安装好了 prettier

    然后在package.json添加

    "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
        }
      }
    

    88c78a186fafe3b09eaee886d89492f3.png

    .eslintignore

    在根目录创建.eslintignore

    build/*.js
    src/assets
    public
    dist

    这里是忽略文件的配置,比如我们打包后的文件dist/**,我们当然是不希望格式化的

    定制 Prettier

    我们使用 Prettier 就是为了零配置

    但是默认的东西,总会有不喜欢的

    所以 Prettier 还是提供了少许的配置供我们修改

    比如:

    • 单引号
    • 末尾属性保留,
    • tab宽度为2
    • seim不使用分号
    • ...

    在根目录创建.prettierrc.js

    // .prettierrc.js
    module.exports = {
      singleQuote: true, // 平常模式使用单引号
      trailingComma: "es5", // 末尾属性添加,
      tabWidth: 2, // tab 为2个空格长度
      semi: false, // 不需要分号
      printWidth: 120, // 单行长度
    };
    

    VScode:检查 + 自动修复

    安装ESLint插件

    这里只对 VScode进行演示

    5119558435ae9489adadfe6d07fee1cd.png

    随机创建一个文件测试1.vue

    5bbaf5b20629104bba410aa6170b9658.png

    出现红色波浪线,说明ESlint配置成功

    现在我们来配置自动修复功能

    50cbc17b6086824ac5c53533d9a2600d.png
    1. Mac 用户按住 shift + command + p唤醒搜索栏;Win 用户按F1或者Ctrl + shift + p
    2. 输入open settings json

    settings.json里面添加以下语句

    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue",
      "html"
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    },
    "eslint.alwaysShowStatus": true,

    b2350e087df8f840cc1ee40d43d63f7f.png

    配置完成

    建议使用 command + q彻底关闭 vscode后再开启,Win 用户直接关闭 vscode 即可
    避免后期可能遇到格式化时代码混乱

    EditorConfig

    如果还不清楚EditorConfig是什么的,进入官网查看

    在根目录创建.editorconfig

    # https://editorconfig.org
    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true

    然后再安装插件

    009663bad5c4f0afa5beb56f3a33c58f.png

    如何推广

    vscode 提示安装插件

    创建.vscode/extensions.json

    {
      // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
      // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
    
      // List of extensions which should be recommended for users of this workspace.
      "recommendations": ["dbaeumer.vscode-eslint", "editorconfig.editorconfig"],
      // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
      "unwantedRecommendations": []
    }

    7a5e0f7c3ed4e31eab991c459f3185ab.png

    当新的开发者接手这个项目时

    81a6265db4d722bc637512f1d22e8bd4.png

    输入@recommended即可看到我们提示用户安装对应的插件

    无侵入

    如果是按照 React项目安装的,就无需再看了

    根据vue add eslint安装的 git hook

    "lint-staged": {
        "*.{js,jsx,vue}": [
          "vue-cli-service lint",
          "git add"
        ]
      }

    这样的方案是更改全局的

    如果有些项目是手动 diff 的 ,这样无疑会破坏原本线上与开发的版本,到时后续的 diff 不便

    这里如果通过vue add eslint添加 git hook 的改为以下方案

    npm install pretty-quick husky -D
    注意:这里一定要确保提前安装好了 prettier

    然后在package.json添加

    "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
        }
      }
    

    1139d17a8e803c4b20c871bf479ec42c.png

    那么当新的开发者加入,那么对于他来说,本文的全部配置他是无感的,比如没有安装 ESlint 插件,他就不会报错,不报错当然是无感的,他的每次提交也不会全局的破坏原本的项目风格

    每次提交只修改提交文件,这种渐进的改变会让别人不知道整个 ESlint 方案的存在

    展开全文
  • 打开vscode的设置。setting.json文件,加入以下配置 "editor.formatOnSave": false, // 自动修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 配置 ESLint 检查的文件类型 "eslint....

    打开vscode的设置。setting.json文件,加入以下配置

       "editor.formatOnSave": false,
        // 自动修复
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
        },
        // 配置 ESLint 检查的文件类型
        "eslint.validate": ["javascript","vue","html"],
    
    展开全文
  • 1.安装eslint 插件 2. 进入 vscode setting.json 里面 1.添加 代码,完成 "editor.codeActionsOnSave": { "source.fixAll": true },

    1.安装 eslint  插件

    2.  进入 vscode setting.json 里面

    1.添加 代码,完成

    "editor.codeActionsOnSave": {
            "source.fixAll": true
        },

    展开全文
  • 主要介绍了vscode代码格式化eslint的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用VScode打开项目时,避免项目路径过深。尽量做到开发a项目就打开a...关键词:ESLint配置+自动修复、TSLint配置+自动修复、stylelint配置+自动修复ESLint1. 首先安装eslint,并增加相关配置$ yarn add eslint新建...
  • ESlint + VSCode自动格式化代码(2020)

    千次阅读 2020-05-07 21:04:42
    利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。 安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户),搜索 ...
  • 主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能,本文通过实例代码图文的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • VScode+ESlint 自动格式化代码(2021)

    千次阅读 热门讨论 2021-02-21 12:09:01
    利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。 1、安装插件 ESLint, 2、配置eslint插件 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> ...
  • 话不多说,直接上图: 设置内容并保存(别忘了先提前安装相关组件): ... // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复..
  • 利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。 安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户), 搜索 ...
  • vscode 配合 eslint 自动格式化代码 1. vscode安装eslint插件 2. 打开 vscode 的配置文件—— settings.json    点击左下角的设置或者输入ctrl+shift+p 找到Open Setting JSON    安装好以后,打开 vscode 的...
  • ESLint Website | Configuring | Rules | Contributing | Reporting Bugs | Code of Conduct | Twitter | Mailing List | Chat Room ESLint is a tool for identifying and reporting on patterns found in ...
  • 这是vscode的设置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, "eslint.validate": [ "javascript", "html", "vue" ],
  • 新版本VSCode保存自动格式化Eslint操作 1. 安装Eslint插件-在扩展处搜索下载 2. 配置自动保存 打开 首选项, 打开首选项的方式常用vscode的应该也知道windows和mac的位置稍有不同, 都是顶部菜单第一个里边的, ...
  • 一、安装ESlint插件,打开vscode选择“文件”–>“首选项”–>“设置”,键入“eslint”搜索,往下滑动,点击“Edit in settings.json”,打开“setttings.json”文件加入如下设置 { //打开文件不覆盖 ...
  • vsCode中使用ESLint自动格式化代码

    万次阅读 多人点赞 2020-12-07 17:44:05
    ESLint 是一个代码规范和错误检查工具,有以下几个特性 所有东西都是可以插拔的。...2、 配置settings.json,设置启用eslint自动格式化 1)点击文件 -->首选项 -->设置 2)进去后点击右上角,打开
  • 主要介绍了vscode配置vue下的es6规范自动格式化详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 1、ESlint 2、vetur 3、Prettier - Code formatter 4、Manta's Stylus Supremacy 二、改配置,打开设置如下 覆盖原来的代码: (有注释可根据个人喜好修改) { "workbench.iconTheme": "vscode-great-icons", ...
  • vscode中使用eslint自动保存代码 1. 安装eslint插件 2. 配置vscode 在设置中找到settings.json文件,加入下面的代码. "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  • 一:在应用商店中搜索安装编辑器插件 Prettier - Code formatter Eslint ... "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babe
  • eslint+vscode格式化代码

    2021-11-02 23:39:00
    vscode安装eslint插件 全局安装eslint npm i -g eslint eslint --init #//js项目根目录运行,按照提示选择 项目根目录创建三个文件,然后执行npm install .editorconfig root = true [*] end_of_line = lf ...
  • vscode 使用eslint(保存自动格式化

    千次阅读 2020-08-26 10:32:26
    前提:在package.json中安装了eslint的依赖 1.在项目跟目录添加.eslintrc.js 文件 // https://cn.eslint.org/docs/rules/ // /* * "off"或者0,不启用这个规则 * "warn"或者1,出现问题会有警告 * "error...
  • ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中。 步骤如下 1:在vs中安装插件 在这里插入图片描述 2:在vs中全局或者局部安装eslint npm install eslint 3:配置初始文件 一般在创建项目的...
  • VSCode配置自动缩进(格式化代码) 配置基于 VSCode v1.41.0 以上版本 打开vscode配置文件 settings.json { //自动缩进的开关 (关键配置),设置为true则打开自动缩进 "editor.codeActionsOnSave": { ...
  •   开发Vue或者React的项目的时候,我们经常用到ESLint进行代码的校验,...ESLint极大的提高了团队代码的一致性和规范性,接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候,根据ESLint的配置自动...
  • 直到遇到了这个文章才解决:解决VS Code保存时候自动格式化_一汀程序狗的博客-CSDN博客_vscode保存时自动格式化不知道从哪个版本起,VS code 保存会自动格式化。以前都是alt+shift+F格式化的,现在一保存就格式化,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,086
精华内容 1,634
关键字:

eslintvscode自动格式化