【转载】vscode中自动格式化成eslint格式

vscode中的如何自动将代码格式化成eslint风格

找到"文件" -> "首选项" -> "设置"(或者: File->Preferences->Settings ),点击右上角,切换到setting.json配置文件

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "all"
}

1、安装 ESlint 的插件,重启vscode

2、右键vue页面,选择“格式化本文档”或(Shift+Alt+F)

 转载:vscode中的如何自动将代码格式化成eslint风格_51CTO博客_eslint vscode 自动格式化

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VSCode 可以通过安装相应的插件来实现自动格式化ESLint 验证和 Vue CLI 集。 首先,在 VSCode 搜索并安装 ESLint 插件,例如 "ESLint" 插件。安装完毕后,VSCode 会在工具栏显示一个 ESLint 图标,表示已功安装。 接下来,我们需要在项目根目录下安装和配置 ESLint。在终端运行以下命令来安装 ESLint 和相关规则: ``` npm install eslint --save-dev ``` 安装完后,我们需要在项目根目录下创建一个 `.eslintrc` 配置文件,在其定义我们需要的 ESLint 规则。可以使用一些流行的规则预设,例如 `eslint:recommended` 或 `plugin:vue/essential`,也可以自定义规则。具体的配置内容可以参考 ESLint 官方文档。 配置好 `.eslintrc` 后,我们需要在 VSCode 启用自动格式化。通过点击 VSCode 工具栏的 "ESLint" 图标,再点击 "ESLint: Enable ESLint" 来启用自动格式化功能。这样,当我们保存文件时,VSCode 就会自动根据 `.eslintrc` 的规则进行格式化和验证。 对于 Vue 项目,我们还可以集 Vue CLI。Vue CLI 提供了一个方便的命令行界面来初始化、开发和构建 Vue.js 项目。在终端运行以下命令来安装 Vue CLI: ``` npm install -g @vue/cli ``` 安装完后,可以在终端运行 `vue create` 命令来创建新的 Vue 项目。Vue CLI 会帮助我们配置好项目的基本结构,并且已经内置了对 ESLint 的支持。 总结而言,要实现 VSCode 自动格式化ESLint 验证和 Vue CLI 集,我们需要在 VSCode 安装 ESLint 插件,然后在项目根目录下配置 `.eslintrc` 文件,并启用自动格式化功能。另外,如果使用 Vue CLI 创建项目,ESLint 的集已经在项目初始化的过程。这样,我们就可以在开发过程自动进行代码风格的格式化和规范验证。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值