在IDEA中配置eslint和prettier

这篇具有很好参考价值的文章主要介绍了在IDEA中配置eslint和prettier。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、插件配置

idea eslint插件,intellij-idea,javascript,java

# 版本根据实际情况而定
npm install eslint prettier --save-dev
 
npm install --save-dev eslint-plugin-prettier 

npm install --save-dev eslint-config-prettier

npm install --save-dev eslint-plugin-vue

npm install --save-dev @babel/eslint-parser




一开始用的是ESlint8以上的版本,后来一直报莫名其妙的错,就回退到7.5.0的版本。 


2、在项目中引入文件夹

idea eslint插件,intellij-idea,javascript,java

  • .eslintrc.js(主要用来在rules中自定义规则)
module.exports = {
  root: true,
    //环境
    env: {
        browser: true,
        node: true
    },
    // 这里是 vue插件
    extends: ['eslint:recommended', 'plugin:prettier/recommended', 'prettier'],
    globals: {
        //忽略全局的变量
        $: true
    },
    parserOptions: {
        parser: '@babel/eslint-parser'
    },
    plugins: ['vue', 'prettier'],
   // 0 代表关闭  1 代表警告  2 代表开启
  rules: {
    'no-async-promise-executor': 1, //禁止使用异步函数作为 Promise executor
    'no-await-in-loop': 1, // 禁止使用 await async
    'no-console': 1, //禁用 console
    'no-debugger': 1, //禁用 debugger
    'no-dupe-args': 2, //函数参数不能重复
    'no-regex-spaces': 2, //禁止正则表达式字面量中出现多个空格
    'default-case': 2, //switch语句最后必须有default
    'no-alert': 0, //禁止使用alert confirm prompt
    'no-array-constructor': 1, //禁止使用数组构造器
    'no-bitwise': 0, //禁止使用按位运算符
    'no-caller': 0, //禁止使用arguments.caller或arguments.callee
    'no-catch-shadow': 2, //禁止catch子句参数与外部作用域变量同名
    'no-class-assign': 0, //禁止给类赋值
    'no-cond-assign': 0, //禁止在条件表达式中使用赋值语
    'no-const-assign': 0, //禁止修改const声明的变量
    'no-constant-condition': 0, //禁止在条件中使用常量表达式 if(true) if(1)
    'no-continue': 0, //禁止使用continue
    'no-control-regex': 2, //禁止在正则表达式中使用控制字符
    'no-delete-var': 2, //不能对var声明的变量使用delete操作符
    'no-div-regex': 1, //不能使用看起来像除法的正则表达式/=foo/
    'no-dupe-keys': 2, //在创建对象字面量时不允许键重复 {a:1,a:1}
    'no-duplicate-case': 2, //switch中的case标签不能重复
    'no-else-return': 0, //如果if语句里面有return,后面不能跟else语句
    'no-empty': 2, //块语句中的内容不能为空
    'no-empty-character-class': 2, //正则表达式中的[]内容不能为空
    'no-eq-null': 1, //禁止对null使用==或!=运算符
    'no-eval': 0, //禁止使用eval
    'no-ex-assign': 2, //禁止给catch语句中的异常参数赋值
    'no-extend-native': 0, //禁止扩展native对象
    'no-extra-bind': 2, //禁止不必要的函数绑定
    'no-extra-boolean-cast': 2, //禁止不必要的bool转换
    'no-extra-parens': 2, //禁止非必要的括号
    'no-extra-semi': 2, //禁止多余的冒号
    'no-fallthrough': 1, //禁止switch穿透
    'no-floating-decimal': 2, //禁止省略浮点数中的0 .5 3.
    'no-func-assign': 2, //禁止重复的函数声明
    'no-implicit-coercion': 1, //禁止隐式转换
    'no-implied-eval': 2, //禁止使用隐式eval
    'no-inline-comments': 1, //禁止行内备注
    'no-inner-declarations': [0, 'functions'], //禁止在块语句中使用声明(变量或函数)
    'no-invalid-regexp': 2, //禁止无效的正则表达式
    'no-invalid-this': 2, //禁止无效的this,只能用在构造器,类,对象字面量
    'no-irregular-whitespace': 2, //不能有不规则的空格
    'no-iterator': 0, //禁止使用__iterator__ 属性
    'no-label-var': 2, //label名不能与var声明的变量名相同
    'no-labels': 0, //禁止标签声明
    'no-lone-blocks': 2, //禁止不必要的嵌套块
    'no-lonely-if': 1, //禁止else语句内只有if语句
    'no-loop-func': 1, //禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
    'no-mixed-requires': [0, false], //声明时不能混用声明类型
    'no-mixed-spaces-and-tabs': [2, false], //禁止混用tab和空格
    'linebreak-style': [0, 'windows'], //换行风格
    'no-multi-spaces': 1, //不能用多余的空格
    'no-multi-str': 2, //字符串不能用\换行
    'no-multiple-empty-lines': [1, {max: 2}], //空行最多不能超过2行
    'no-native-reassign': 0, //不能重写native对象
    'no-negated-in-lhs': 2, //in 操作符的左边不能有!
    'no-nested-ternary': 0, //禁止使用嵌套的三目运算
    'no-new': 1, //禁止在使用new构造一个实例后不赋值
    'no-new-func': 1, //禁止使用new Function
    'no-new-object': 1, //禁止使用new Object()
    'no-new-require': 1, //禁止使用new require
    'no-new-wrappers': 1, //禁止使用new创建包装实例,new String new Boolean new Number
    'no-obj-calls': 0, //不能调用内置的全局对象,比如Math() JSON()
    'no-octal': 2, //禁止使用八进制数字
    'no-octal-escape': 2, //禁止使用八进制转义序列
    'no-param-reassign': 0, //禁止给参数重新赋值
    'no-path-concat': 0, //node中不能使用__dirname或__filename做路径拼接
    'no-plusplus': 1, //禁止使用++,--
    'no-process-env': 0, //禁止使用process.env
    'no-process-exit': 0, //禁止使用process.exit()
    'no-proto': 0, //禁止使用__proto__属性
    'no-redeclare': 2, //禁止重复声明变量
    'no-restricted-modules': 0, //如果禁用了指定模块,使用就会报错
    'no-return-assign': 1, //return 语句中不能有赋值表达式
    'no-script-url': 0, //禁止使用javascript:void(0)
    'no-self-compare': 2, //不能比较自身
    'no-sequences': 0, //禁止使用逗号运算符
    'no-shadow': 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
    'no-shadow-restricted-names': 2, //严格模式中规定的限制标识符不能作为声明时的变量名使用
    'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格
    'no-sparse-arrays': 2, //禁止稀疏数组, [1,,2]
    'no-sync': 0, //nodejs 禁止同步方法
    'no-ternary': 0, //禁止使用三目运算符
    'no-trailing-spaces': 1, //一行结束后面不要有空格
    'no-this-before-super': 0, //在调用super()之前不能使用this或super
    'no-throw-literal': 1, //禁止抛出字面量错误 throw "error";
    'no-undef': 1, //不能有未定义的变量
    'no-undef-init': 1, //变量初始化时不能直接给它赋值为undefined
    'no-undefined': 1, //不能使用undefined
    'no-unexpected-multiline': 2, //避免多行表达式
    'no-underscore-dangle': 1, //标识符不能以_开头或结尾
    'no-unneeded-ternary': 1, //禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
    'no-unreachable': 2, //不能有无法执行的代码
    'no-unused-expressions': 2, //禁止无用的表达式
    'no-unused-vars': [2, {vars: 'all', args: 'after-used'}], //不能有声明后未被使用的变量或参数
    'no-use-before-define': 2, //未定义前不能使用
    'no-useless-call': 2, //禁止不必要的call和apply
    'no-void': 2, //禁用void操作符
    'no-var': 0, //禁用var,用let和const代替
  },
};
  •  prettierrc.js (自动修复代码中的规范)
//.prettierrc.js
module.exports = {
    // 最大长度80个字符
    printWidth: 120,
    // 行末分号
    semi: true,
    // 单引号
    singleQuote: true,
    // JSX双引号
    jsxSingleQuote: false,
    // 尽可能使用尾随逗号(包括函数参数)
    trailingComma: 'none',
    // 在对象文字中打印括号之间的空格。
    bracketSpacing: true,
    // > 标签放在最后一行的末尾,而不是单独放在下一行
    jsxBracketSameLine: true,
    // 缩进
    tabWidth: 4,
    // 使用tab还是空格
    useTabs: false,
    // 行尾换行格式
    endOfLine: 'auto',
    //空格敏感
    HTMLWhitespaceSensitivity: 'ignore',
    extends: [
        //继承 vue 的标准特性
        'plugin:vue/essential',
        'eslint:recommended',
        //避免冲突
        'plugin:prettier/recommended'
    ]
};


  •  .eslintignore (规则忽略的文件夹)
node_modules
/dist
/static
  •  .editorconfig(这个文件夹会去查看.md文件夹中的规范,可配置可不配)
root = true

[*]
#字符集utf-8
charset = utf-8
#缩进风格:空格
indent_style = space
#缩进大小2
indent_size = 2
#换行符lf
end_of_line = lf
#是否删除行尾的空格
insert_final_newline = true
#是否在文件的最后插入一个空行
trim_trailing_whitespace = true

3、idea配置 

在 IDEA的设置中找到ESlint,选择手动ESlint配置,ESlint选择所在项目下node_modules下的eslint,可以勾选“保存时运行eslint -fix(U)”,这样保存时就会自动修改成规范的代码。接着点击“应用”,再选择“确定”就行了。

idea eslint插件,intellij-idea,javascript,java

prettier也记得设置一下,全部配置完后重启IDEA。 idea eslint插件,intellij-idea,javascript,java


以上就是配置的全过程,本人菜鸟一枚,如有错误烦请指出 ,感激不尽!文章来源地址https://www.toymoban.com/news/detail-738499.html

到了这里,关于在IDEA中配置eslint和prettier的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java项目使用intellij-IDEA查看依赖包版本是否有冲突(方法及工具)附截图

    编译器及版本 idea-ultimate 依赖管理工具 maven Step1:点击右侧的maven Step2:右键依赖项,点击分析依赖关系 Step3:可以在模块名位置进行切换,左侧三角的标志则表示该包引入了多个版本,有冲突 Step4:可以看到当前这个包被引入了两个版本的 Step5:右键冲突的包名,可以看到

    2024年02月15日
    浏览(104)
  • IntelliJ IDEA中配置及使用SonarLint插件

    打开IntelliJ IDEA—settings—plugins,在Marketplace搜索SonarLint,下载安装,重启IntelliJ IDEA。 打开IntelliJ IDEA—settings—Other Settings—SonarLint General Settings或者IntelliJ IDEA—settings—SonarLint General Settings,勾选Settings—Automatically trigger analysis,点击Apply,再点击OK。 鼠标移动到项目根目录,

    2024年02月06日
    浏览(53)
  • Intellij IDEA 插件开发

    很多idea插件文档更多的是介绍如何创建一个简单的idea插件,本篇文章从开发环境、demo、生态组件、添加依赖包、源码解读、网络请求、渲染数据、页面交互等方面介绍,是一篇能够满足基本的插件开发工程要求的文章。 如有疏漏欢迎指正,如想深入了解欢迎探讨。 Intelli

    2024年02月11日
    浏览(115)
  • Intellij IDEA 如何删掉插件

    在 Intellij IDEA 的配置中,找到插件选项。 在插件选项中,选择需要删除的插件,然后在右侧的对话框中选择 uninstall 就可以了。 卸载以后,可能不会要求重启,为了安全起见,还是重启下你的 IDE 吧。  

    2024年02月16日
    浏览(52)
  • IntelliJ IDEA使用——插件推荐

    官网插件库:https://plugins.jetbrains.com/search 代码规范检测: Alibaba Java Coding Guidelines 码云: Gitee mybatis插件: MyBatisX 多颜色括号: Rainbow Brackets 操作快捷键提示: Key Promoter X 力扣(使用参考): LeetCode Editor 依赖管理: Maven Helper Json转Bean实体类: GsonFormat Bean实体类转Json: Ja

    2024年02月07日
    浏览(54)
  • IntelliJ IDEA快捷键+插件

    文章持续更新。。。 alt + enter(两次) 自动声明变量 = 自动补全左边代码 Ctrl + Alt + / = 自动补全左边代码 CTRL+ALT+O 优化导入的类和包 Ctr+shift+U 大小写转化 鼠标右键 =》find in patch (查找文件里面的字段内容) ctrl + r 替换当前文件内容 Ctrl + G idea跳转到指定行列快捷键 ctrl + h idea h

    2024年01月18日
    浏览(57)
  • IntelliJ IDEA工具常用插件汇总

    😜 作           者 :是江迪呀 ✒️ 本文 : IntelliJ IDEA 、 常用插件 ☀️ 每日   一言 : 人的一生其实都在偏见和走出偏见中度过 IntelliJ IDEA 是开发人员中广泛使用的一款集成开发环境(IDE),它在编写、调试和管理代码方面提供了强大的功能和工具。我们将汇

    2024年02月09日
    浏览(50)
  • IntelliJ IDEA 智能(AI)编码工具插件

    仅仅自动生成单元测试功能 TestMe插件(免费)仅仅是模板填充,不智能。 Squaretest插件(收费) 目前感觉 通义灵码 和 bito 还行 免费 地址 :https://tongyi.aliyun.com/lingma 通义灵码是阿里推出的基于通义大模型,提供代码智能生成、研发智能问答能力的人工智能编码助手,经过海

    2024年02月05日
    浏览(48)
  • IntelliJ IDEA 2023.2社区版插件汇总

    参考插件帝:https://gitee.com/zhengqingya/idea-config/ IDEA插件市场:https://plugins.jetbrains.com/ 突发小技巧:使用插件时要注意插件的版本兼容性,并根据自己的实际需求选择合适的插件。同时,不要过度依赖插件,保持简洁和高效的开发环境才是最重要的。 顾名思义就是配置tomcat的,

    2024年02月14日
    浏览(72)
  • IntelliJ IDEA 的chatGPT插件 Bito

    1、chatGPT爆火 最近你是否听说过“ChatGPT”这个词?它指的是一种基于深度学习技术的人工智能语言生成模型。自从2018年由OpenAI发布以来,ChatGPT就备受关注,甚至在2022年成为了全球最强AI模型之一。 2、chatGPT介绍 ChatGPT(Generative Pre-trained Transformer)是一种基于深度学习技术的

    2024年02月01日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包