首页 > 其他分享 >ESLint

ESLint

时间:2024-04-11 16:45:04浏览次数:19  
标签:插件 false prettier vetur eslint true ESLint

一个检测代码风格的工具

debugger,使用代码的方式打断点

规则报错可以去eslint官网查看以参照修改

插件:eslint

配置:在setting.json内输入

//ESLint插件配置
"editor.codeActionsOnSave":{
  "source.fixAll":true,  
},

插件:Prettier

配置:在setting.json内输入

//prettier、eslint、vetur插件设置
    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    "prettier.printWidth": 300,
    //每行文字个数,超出将强制换行
    "prettier.singleQuote": true,
    //单引号替换为双引号
    "prettier.arrowParens": "avoid",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 设置.vue文件中,Html代码的格式化插件
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "false"
        },
        "prettier": {
            "trailingComma":"none",
            "printWidth": 300,
            "singleQuote": true,
            "semi": false,
            "arrowParens":"avoid"
        }
    },

最后,右键.vue和.js文件设置格式化文件的方式

 

标签:插件,false,prettier,vetur,eslint,true,ESLint
From: https://www.cnblogs.com/JC30705/p/18129528

相关文章

  • 前端【VUE】09-vue【Eslint】
    一、ESLint在vscode插件中搜索ESLint,https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 什么是ESLint官方概念:ESLint是可组装的JavaScript和JSX检查工具。通俗理解:一个工具,用来约束团队成员的代码风格。当通过@vue......
  • quotes: ["error", "single"], eslint的这个规则是什么意思
    quotes:["error","single"]是ESLint规则配置的一部分,用于指定字符串字面量的引号使用规范。具体解释如下:quotes:这是ESLint的规则名称,表示要对代码中的字符串引号使用进行检查。["error","single"]:这是对quotes规则的具体配置,由两个元素组成:"error":第一个......
  • Vue3 + TypeScript + Vite 初始项目搭建(ESLint、Prettier、Sass、Stylelint、husky、p
    仓库地址仓库地址:https://gitee.com/tongchaowei/vue-ts-vite-template项目源码下载:https://gitee.com/tongchaowei/vue-ts-vite-template/releases全局安装pnpm包管理工具执行如下命令在系统全局安装pnpm包管理工具:npmipnpm-g使用Vite脚手架创建Vue3......
  • 禁用某行eslint校验
    要在代码中禁用ESLint规则,可以使用特殊的注释语法。在需要禁用规则的行前添加以下注释://eslint-disable-next-line[rule-name]这行代码会禁用紧跟其后的下一行的指定规则。如果你想禁用当前行以及后面的多行,可以使用:/*eslint-disable[rule-name]*/这个块注释会禁用它们之......
  • .eslintignore中的**/_* 这个匹配到的是什么
    .eslintignore文件中的**/_*是一个glob模式,用于指定ESLint应该忽略哪些文件或目录。具体解释如下:**:表示任意层级的子目录。它会递归地匹配当前目录及其所有子目录下的文件和目录。/:在glob模式中,斜线/用于分隔目录层级。_*:表示以_符号开头的任何字符序列。这......
  • Vue3+TS项目,eslint安装配置
            eslint的作用主要为:可以规范团队的代码风格。在实际项目中,团队的每个成员的编码习惯都不同,这极有可能造成,一个项目多个代码风格,这会造成代码阅读困难,后期维护难度大灯问题,这就需要配置下eslint。首先我们需要先安装 @eslint/create-config 插件:pnpminstal......
  • 使用pnpm时,hoist-pattern[]=eslint hoist-pattern[]=babel这个配置的作用?
    在pnpm工作区(monorepo)中,hoist-pattern配置项用于决定哪些依赖应该被提升(hoist)到工作区的根节点node_modules目录中,而不是保留在每个工作区包各自的node_modules目录下。这有助于减少磁盘空间占用并加速依赖的安装速度。hoist-pattern[]=*eslint*和hoist-pattern[]=*babe......
  • eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 解释
    eslintsrc--extts,tsx--report-unused-disable-directives--max-warnings0解释一下这段命令这段命令是用来运行ESLint工具检查代码的,针对的是src目录下所有.ts和.tsx后缀的TypeScript文件。命令各部分的具体含义如下:eslint:这是执行ESLint工具本身的命令......
  • React配置Eslint
    Eslint的配置相对复杂一点,记录一下项目中使用的配置,以备后续查阅。1.下载Eslint插件并在webpack的配置文件中声明、初始化constEslintWebpackPlugin=require("eslint-webpack-plugin");plugins:[//eslint用于代码规范检查,作用相当于js的编译器//esl......
  • Vue项目中关闭Eslint检查
    1.问题由于Eslint检查总是无法通过编译,在我们写一些简单的程序时显得十分麻烦,便想要关闭它2.解决这里有两种情况2.1使用WebStorm自带的Eslint导致的检查这种情况只要在WebStorm中的设置里关闭即可2.2Vue项目创建时选择了Eslint检查,生成了相应的js文件参考:vue关闭eslint(......