在IDEA中配置eslint和prettier的全過程
更新時間：2024年02月26日 08:55:29 作者：可愛的小菜雞
日常開發(fā)中,建議用可以用Prettier做代碼格式化,然后用eslint做校驗,下面這篇文章主要給大家介紹了關(guān)于在IDEA中配置eslint和prettier的相關(guān)資料,需要的朋友可以參考下
1、插件配置
# 版本根據(jù)實際情況而定 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 代表關(guān)閉 1 代表警告 2 代表開啟
rules: {
'no-async-promise-executor': 1, //禁止使用異步函數(shù)作為 Promise executor
'no-await-in-loop': 1, // 禁止使用 await async
'no-console': 1, //禁用 console
'no-debugger': 1, //禁用 debugger
'no-dupe-args': 2, //函數(shù)參數(shù)不能重復(fù)
'no-regex-spaces': 2, //禁止正則表達(dá)式字面量中出現(xiàn)多個空格
'default-case': 2, //switch語句最后必須有default
'no-alert': 0, //禁止使用alert confirm prompt
'no-array-constructor': 1, //禁止使用數(shù)組構(gòu)造器
'no-bitwise': 0, //禁止使用按位運算符
'no-caller': 0, //禁止使用arguments.caller或arguments.callee
'no-catch-shadow': 2, //禁止catch子句參數(shù)與外部作用域變量同名
'no-class-assign': 0, //禁止給類賦值
'no-cond-assign': 0, //禁止在條件表達(dá)式中使用賦值語
'no-const-assign': 0, //禁止修改const聲明的變量
'no-constant-condition': 0, //禁止在條件中使用常量表達(dá)式 if(true) if(1)
'no-continue': 0, //禁止使用continue
'no-control-regex': 2, //禁止在正則表達(dá)式中使用控制字符
'no-delete-var': 2, //不能對var聲明的變量使用delete操作符
'no-div-regex': 1, //不能使用看起來像除法的正則表達(dá)式/=foo/
'no-dupe-keys': 2, //在創(chuàng)建對象字面量時不允許鍵重復(fù) {a:1,a:1}
'no-duplicate-case': 2, //switch中的case標(biāo)簽不能重復(fù)
'no-else-return': 0, //如果if語句里面有return,后面不能跟else語句
'no-empty': 2, //塊語句中的內(nèi)容不能為空
'no-empty-character-class': 2, //正則表達(dá)式中的[]內(nèi)容不能為空
'no-eq-null': 1, //禁止對null使用==或!=運算符
'no-eval': 0, //禁止使用eval
'no-ex-assign': 2, //禁止給catch語句中的異常參數(shù)賦值
'no-extend-native': 0, //禁止擴展native對象
'no-extra-bind': 2, //禁止不必要的函數(shù)綁定
'no-extra-boolean-cast': 2, //禁止不必要的bool轉(zhuǎn)換
'no-extra-parens': 2, //禁止非必要的括號
'no-extra-semi': 2, //禁止多余的冒號
'no-fallthrough': 1, //禁止switch穿透
'no-floating-decimal': 2, //禁止省略浮點數(shù)中的0 .5 3.
'no-func-assign': 2, //禁止重復(fù)的函數(shù)聲明
'no-implicit-coercion': 1, //禁止隱式轉(zhuǎn)換
'no-implied-eval': 2, //禁止使用隱式eval
'no-inline-comments': 1, //禁止行內(nèi)備注
'no-inner-declarations': [0, 'functions'], //禁止在塊語句中使用聲明（變量或函數(shù)）
'no-invalid-regexp': 2, //禁止無效的正則表達(dá)式
'no-invalid-this': 2, //禁止無效的this，只能用在構(gòu)造器，類，對象字面量
'no-irregular-whitespace': 2, //不能有不規(guī)則的空格
'no-iterator': 0, //禁止使用__iterator__ 屬性
'no-label-var': 2, //label名不能與var聲明的變量名相同
'no-labels': 0, //禁止標(biāo)簽聲明
'no-lone-blocks': 2, //禁止不必要的嵌套塊
'no-lonely-if': 1, //禁止else語句內(nèi)只有if語句
'no-loop-func': 1, //禁止在循環(huán)中使用函數(shù)（如果沒有引用外部變量不形成閉包就可以）
'no-mixed-requires': [0, false], //聲明時不能混用聲明類型
'no-mixed-spaces-and-tabs': [2, false], //禁止混用tab和空格
'linebreak-style': [0, 'windows'], //換行風(fēng)格
'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構(gòu)造一個實例后不賦值
'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, //不能調(diào)用內(nèi)置的全局對象，比如Math() JSON()
'no-octal': 2, //禁止使用八進制數(shù)字
'no-octal-escape': 2, //禁止使用八進制轉(zhuǎn)義序列
'no-param-reassign': 0, //禁止給參數(shù)重新賦值
'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, //禁止重復(fù)聲明變量
'no-restricted-modules': 0, //如果禁用了指定模塊，使用就會報錯
'no-return-assign': 1, //return 語句中不能有賦值表達(dá)式
'no-script-url': 0, //禁止使用javascript:void(0)
'no-self-compare': 2, //不能比較自身
'no-sequences': 0, //禁止使用逗號運算符
'no-shadow': 2, //外部作用域中的變量不能與它所包含的作用域中的變量或參數(shù)同名
'no-shadow-restricted-names': 2, //嚴(yán)格模式中規(guī)定的限制標(biāo)識符不能作為聲明時的變量名使用
'no-spaced-func': 2, //函數(shù)調(diào)用時 函數(shù)名與()之間不能有空格
'no-sparse-arrays': 2, //禁止稀疏數(shù)組， [1,,2]
'no-sync': 0, //nodejs 禁止同步方法
'no-ternary': 0, //禁止使用三目運算符
'no-trailing-spaces': 1, //一行結(jié)束后面不要有空格
'no-this-before-super': 0, //在調(diào)用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, //避免多行表達(dá)式
'no-underscore-dangle': 1, //標(biāo)識符不能以_開頭或結(jié)尾
'no-unneeded-ternary': 1, //禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
'no-unreachable': 2, //不能有無法執(zhí)行的代碼
'no-unused-expressions': 2, //禁止無用的表達(dá)式
'no-unused-vars': [2, {vars: 'all', args: 'after-used'}], //不能有聲明后未被使用的變量或參數(shù)
'no-use-before-define': 2, //未定義前不能使用
'no-useless-call': 2, //禁止不必要的call和apply
'no-void': 2, //禁用void操作符
'no-var': 0, //禁用var，用let和const代替
},
};
- prettierrc.js （自動修復(fù)代碼中的規(guī)范）
//.prettierrc.js
module.exports = {
// 最大長度80個字符
printWidth: 120,
// 行末分號
semi: true,
// 單引號
singleQuote: true,
// JSX雙引號
jsxSingleQuote: false,
// 盡可能使用尾隨逗號（包括函數(shù)參數(shù)）
trailingComma: 'none',
// 在對象文字中打印括號之間的空格。
bracketSpacing: true,
// > 標(biāo)簽放在最后一行的末尾，而不是單獨放在下一行
jsxBracketSameLine: true,
// 縮進
tabWidth: 4,
// 使用tab還是空格
useTabs: false,
// 行尾換行格式
endOfLine: 'auto',
//空格敏感
HTMLWhitespaceSensitivity: 'ignore',
extends: [
//繼承 vue 的標(biāo)準(zhǔn)特性
'plugin:vue/essential',
'eslint:recommended',
//避免沖突
'plugin:prettier/recommended'
]
};
- .eslintignore （規(guī)則忽略的文件夾）
node_modules /dist /static
- .editorconfig（這個文件夾會去查看.md文件夾中的規(guī)范，可配置可不配）
root = true [*] #字符集utf-8 charset = utf-8 #縮進風(fēng)格：空格 indent_style = space #縮進大小2 indent_size = 2 #換行符lf end_of_line = lf #是否刪除行尾的空格 insert_final_newline = true #是否在文件的最后插入一個空行 trim_trailing_whitespace = true
3、idea配置
在 IDEA的設(shè)置中找到ESlint，選擇手動ESlint配置，ESlint選擇所在項目下node_modules下的eslint，可以勾選“保存時運行eslint -fix（U）”，這樣保存時就會自動修改成規(guī)范的代碼。接著點擊“應(yīng)用”，再選擇“確定”就行了。
prettier也記得設(shè)置一下，全部配置完后重啟IDEA。
總結(jié)
到此這篇關(guān)于在IDEA中配置eslint和prettier的文章就介紹到這了,更多相關(guān)IDEA配置eslint和prettier內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文講述了"v-deep"深度選擇器被廢棄的情況,作者提醒讀者更新知識庫,避免誤導(dǎo)他人,深度選擇器是HTML5的新屬性,用于實現(xiàn)組件私有化和防止樣式污染,如果想讓樣式中的一個選擇器作用得更深,可以使用深度選擇器,但現(xiàn)在,以前的寫法已不再支持,需要調(diào)整方法2024-10-10
這篇文章主要介紹了Vue項目如何關(guān)閉語法檢查問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了element 表格嵌套表單驗證指定行的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
今天小編就為大家分享一篇vue-cli腳手架搭建的項目去除eslint驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue手機號正則匹配，姓名加密展示,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue中 axios delete請求參數(shù)操作，具有很好的參考價值，希望對大家有所 幫助。一起跟隨小編過來看看吧2020-08-08
Vue子組件內(nèi)的props對象參數(shù)配置方法
這篇文章主要介紹了?Vue?子組件內(nèi)的??props?對象里的?default?參數(shù)是如何定義Array、?Object?、或?Function?默認(rèn)值的正確寫法說明，感興趣的朋友跟隨小編一起看看吧2022-08-08
本文主要介紹了在VueRouter中,meta對象的使用和配置方式,meta對象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴展性2024-10-10
Vue循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06