在IDEA中配置eslint和prettier的全过程

 更新时间:2024年02月26日 08:55:29   作者:可爱的小菜鸡  
日常开发中,建议用可以用Prettier做代码格式化,然后用eslint做校验,下面这篇文章主要给大家介绍了关于在IDEA中配置eslint和prettier的相关资料,需要的朋友可以参考下

1、插件配置

# 版本根据实际情况而定
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、在项目中引入文件夹

  • .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)”,这样保存时就会自动修改成规范的代码。接着点击“应用”,再选择“确定”就行了。

prettier也记得设置一下,全部配置完后重启IDEA。 

总结

到此这篇关于在IDEA中配置eslint和prettier的文章就介绍到这了,更多相关IDEA配置eslint和prettier内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
    2017-08-08
  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    这篇文章主要介绍了vue项目 使用Hbuilder打包app 设置沉浸式状态栏的方法,本文通过实例代码效果图展示给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • VUEJS实战之构建基础并渲染出列表(1)

    VUEJS实战之构建基础并渲染出列表(1)

    这篇文章主要为大家详细介绍了VUEJS实战之构建基础并渲染出列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • vue生成token保存在客户端localStorage中的方法

    vue生成token保存在客户端localStorage中的方法

    本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 用vue写一个日历

    用vue写一个日历

    这篇文章主要介绍了如何利用vue写一个日历,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • 详解Vue中过度动画效果应用

    详解Vue中过度动画效果应用

    这篇文章主要介绍了详解Vue中过度动画效果应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解搭建一个vue-cli的移动端H5开发模板

    详解搭建一个vue-cli的移动端H5开发模板

    这篇文章主要介绍了详解搭建一个vue-cli的移动端H5开发模板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 简单谈谈vue的过渡动画(推荐)

    简单谈谈vue的过渡动画(推荐)

    下面小编就为大家带来一篇简单谈谈vue的过渡动画(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 如何去除element-ui中table的hover效果

    如何去除element-ui中table的hover效果

    这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vuejs选中当前样式active的实例

    vuejs选中当前样式active的实例

    今天小编就为大家分享一篇vuejs选中当前样式active的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论