在IDEA中配置eslint和prettier的全過程
更新時間:2024年02月26日 08:55:29 作者:可愛的小菜雞
日常開發(fā)中,建議用可以用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中自定義規(guī)則)
module.exports = { root: true, //環(huán)境 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, //在創(chuàng)建對象字面量時不允許鍵重復 {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, //不能有不規(guī)則的空格 '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, //禁止在循環(huán)中使用函數(如果沒有引用外部變量不形成閉包就可以) '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創(chuàng)建包裝實例,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, //嚴格模式中規(guī)定的限制標識符不能作為聲明時的變量名使用 '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, //不能有無法執(zhí)行的代碼 '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 (自動修復代碼中的規(guī)范)
//.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 (規(guī)則忽略的文件夾)
node_modules /dist /static
- .editorconfig(這個文件夾會去查看.md文件夾中的規(guī)范,可配置可不配)
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)”,這樣保存時就會自動修改成規(guī)范的代碼。接著點擊“應用”,再選擇“確定”就行了。
prettier也記得設置一下,全部配置完后重啟IDEA。
總結
到此這篇關于在IDEA中配置eslint和prettier的文章就介紹到這了,更多相關IDEA配置eslint和prettier內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
基于Vue sessionStorage實現保留搜索框搜索內容
這篇文章主要介紹了基于Vue sessionStorage實現保留搜索框搜索內容,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06