vue中使用eslint的格式化工具

3 篇文章 0 订阅
2 篇文章 0 订阅

ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。
目前网络上绝大部分的格式化eslint标准的代码方法都比较坑。
目前没有一个可以格式化html、css、符合ESlint的js、vue的插件
经过反复尝试拼凑出来在vue项目中使用eslint时快速解决代码格式问题的方法

解决方案:

第一步:安装插件

1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

2)vetur:可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,
但是!格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等,像这样

在这里插入图片描述
能把html格式化分行显示
在这里插入图片描述
3)Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

4)Manta’s Stylus Supremacy: 格式化stylus的插件(不用就不装),因为vetur会把css格式化有分号 、大括号的那种,此插件会把css格式化成stylus风格,像这样
在这里插入图片描述

2、在vscode的文件-首选项-设置里,右侧配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了

在这里插入图片描述

在这里插入图片描述

{
     // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验 
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用带引号替代双引号 
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: VSCode可以通过安装插件来实现Vue代码的ESLint格式化。 首先,在VSCode打开扩展面板(快捷键为Ctrl + Shift + X),搜索并安装"ESLint"插件。安装完成后,重新加载VSCode。 接下来,在项目的根目录下找到并打开".eslintrc.js"文件,确保已按照项目需求正确配置了ESLint规则。如果没有该文件,则需要手动创建一个。在文件,可以添加、修改或删除适用的规则。例如,可以配置规则来检查和自动修复代码的缩进、引号等问题。 然后,在VSCode的设置,搜索"eslint.autoFixOnSave"选项,并将其设置为true。这会在保存文件时自动运行ESLint,并尝试修复代码的格式问题。此外,还可以设置"eslint.validate"选项来指定在保存文件时进行ESLint验证的文件类型。对于Vue项目,可以将其配置为"vue",以确保在保存Vue文件时进行ESLint验证。 最后,在Vue代码文件,可以根据需要手动触发ESLint格式化。可以使用快捷键(在Windows下为Shift + Alt + F,在Mac下为Shift + Option + F),或者右键点击编辑器空白处,选择"Format Document"选项来格式化当前文件。 总结起来,要在VSCode进行Vue代码的ESLint格式化,需要先安装并配置ESLint插件,更新VSCode设置以自动修复问题,在需要时手动触发格式化操作。这样可以有效地帮助我们遵循代码规范,提高代码质量。 ### 回答2: 在VSCode使用Vue框架进行开发时,可以借助ESLint格式化代码,以保持代码的一致性和可读性。 首先,在VSCode的插件商店搜索并安装ESLint插件。然后,在项目的根目录下创建一个.eslintrc.js或者.eslintrc.json的配置文件。 在配置文件,可以指定要使用ESLint规则,以及各种代码风格规范。一般来说,我们可以选择一种预设规则集,比如"eslint:recommended"或者"plugin:vue/recommended",它们包含了一系列通用的规则以及针对Vue的特定规则。 此外,我们还可以根据团队的要求,自定义一些规则,比如缩进、引号、变量命名等等。可以根据自己的代码风格和习惯来设置这些规则。 配置完成后,可以在VSCode的设置,开启"eslint.autoFixOnSave"选项,这样在保存文件时,ESLint会自动格式化代码并修复一些常见的错误。 在使用过程,可能会遇到一些问题,比如与其他插件的冲突,或者某些规则与项目要求不符。此时,可以根据具体情况进行相应的调整和配置。 总之,通过VSCode和ESLint的配合使用,可以有效地进行Vue代码的格式化和规范化,提高代码的质量和可维护性。 ### 回答3: VSCode是一款非常流行且功能强大的代码编辑器,对于Vue开发来说,它也提供了很好的支持。其一个重要的功能就是ESLint的代码格式化ESLint是一种JavaScript代码的静态分析工具,可以用来检查和格式化代码。Vue项目使用ESLint可以让开发者在编写代码时保持一致的代码风格,并且能够及时发现潜在的问题。 在VSCode使用ESLint进行代码格式化,首先需要安装ESLint插件。打开VSCode,点击左侧的扩展按钮,搜索并安装"ESLint"插件。安装完成后,重启VSCode。 接下来,需要在项目配置ESLint。在Vue项目的根目录下,创建一个名为".eslintrc.js"的文件,并在其添加以下内容: ```javascript module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', 'eslint:recommended', ], parserOptions: { parser: 'babel-eslint', }, rules: { // 在这里可以添加自定义的编码规范 }, }; ``` 在这个配置文件,我们将ESLint的规则继承了"plugin:vue/essential"和"eslint:recommended",同时也可以在"rules"添加自定义的编码规范。 保存配置文件后,当我们在VSCode打开Vue项目的代码文件时,ESLint就会自动进行代码格式化。它会根据配置文件的规则,对代码进行静态分析,并给出错误或警告信息。可以通过按下Ctrl + Shift + P,然后输入"Format Document"来手动触发代码格式化。 总结一下,在VSCode使用ESLint进行Vue代码的格式化,需要安装ESLint插件,并在项目配置ESLint。这样,开发者就可以在代码编写过程保持一致的代码风格,并及时发现潜在的问题。希望这个回答对你有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值