vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法
1.前言
在團(tuán)隊(duì)協(xié)作中,為避免低級(jí) Bug、以及團(tuán)隊(duì)協(xié)作時(shí)不同代碼風(fēng)格對(duì)彼此造成的困擾與影響,會(huì)預(yù)先制定編碼規(guī)范。使用 Lint 工具和代碼風(fēng)格檢測(cè)工具,則可以輔助編碼規(guī)范執(zhí)行,有效控制代碼質(zhì)量。EsLint 則是其中一個(gè)很好的工具。
EsLint 提供以下支持:
- ES6
- AngularJS
- JSX
- Style 檢查
- 自定義錯(cuò)誤和提示
EsLint 提供以下幾種校驗(yàn):
- 語(yǔ)法錯(cuò)誤校驗(yàn)
- 不重要或丟失的標(biāo)點(diǎn)符號(hào),如分號(hào)
- 未被使用的參數(shù)提醒
- 漏掉的結(jié)束符,如}
- 確保樣式的統(tǒng)一規(guī)則,如 sass 或者 less
- 檢查變量的命名
- 影響性能的代碼提醒,如 v-if 和 v-for 同時(shí)使用
2.eslint 配置
2.1 代碼規(guī)范
本項(xiàng)目基本規(guī)范是依托于 vue 官方的eslint-plugin-vue。并使用 Prettier 格式化代碼,使樣式與規(guī)則保持一致。.eslintrc.js 配置如下:
{ root: true, // 當(dāng)前配置為根配置,將不再?gòu)纳霞?jí)文件夾查找配置 parserOptions: { parser: 'babel-eslint', // 采用 babel-eslint 作為語(yǔ)法解析器 sourceType: 'module', // 指定來(lái)源的類型,有兩種script或module ecmaVersion: 6, //指定ECMAScript支持的版本,6為ES6 }, env: { browser: true, // 設(shè)置為所需檢查的代碼是在瀏覽器環(huán)境運(yùn)行的 es6: true // 設(shè)置所需檢查代碼為 es6 語(yǔ)法書(shū)寫(xiě) }, extends: ['plugin:vue/recommended', 'eslint:recommended'],// 擴(kuò)展使用 vue 檢查規(guī)則和eslint推薦規(guī)則 rules: { 'vue/attribute-hyphenation': 0, // 忽略屬性連字 'vue/max-attributes-per-line':[2, { singleline: 10, multiline: { max: 1, allowFirstLine: false } }], // 每行最大屬性 'vue/singleline-html-element-content-newline': 'off', // 單行html元素內(nèi)容在新的一行 'vue/multiline-html-element-content-newline': 'off', // 多行html元素內(nèi)容在新的一行 'vue/html-closing-bracket-newline': 'off', // html右括號(hào)在新的一行 'vue/no-v-html': 'off', // 不使用v-html 'vue/html-self-closing': 0, // 忽略html標(biāo)簽自閉合 'accessor-pairs': 2, // 應(yīng)同時(shí)設(shè)置setter和getter 'arrow-spacing': [2, { before: true, after: true }], // 箭頭間距 'vue/require-default-prop': 0, // 不檢查默認(rèn)屬性 'vue/require-prop-types': 0, // 不檢查默認(rèn)類型 'block-spacing': [2, 'always'], // 塊間距 'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括號(hào)樣式允許單行 'camelcase': [2, { properties: 'always' }], //為屬性強(qiáng)制執(zhí)行駝峰命名 'comma-dangle': [2, 'never'], // 逗號(hào)不使用懸掛 'comma-spacing': [2, { before: false, after: true }], // 逗號(hào)間距 'comma-style': [2, 'last'], //(默認(rèn))與數(shù)組元素,對(duì)象屬性或變量聲明在同一行之后和同一行需要逗號(hào) 'constructor-super': 2, 'consistent-this': [2, 'that'], //強(qiáng)制this別名為that 'curly': [2, 'multi-line'], // 當(dāng)一個(gè)塊只包含一條語(yǔ)句時(shí),不允許省略花括號(hào)。 'dot-location': [2, 'property'], //成員表達(dá)式中的點(diǎn)應(yīng)與屬性部分位于同一行 'eol-last': 2, // 強(qiáng)制文件以換行符結(jié)束(LF) 'eqeqeq': ['error', 'always', { null: 'ignore' }], // 強(qiáng)制使用全等 'generator-star-spacing': [2, { before: true, after: true }], // 生成器中'*'兩側(cè)都要有間距 'global-require': 1, // 所有調(diào)用require()都位于模塊的頂層 'indent': [2, 2, { SwitchCase: 2 }], //縮進(jìn)風(fēng)格 'key-spacing': [2, { beforeColon: false, afterColon: true }], // 強(qiáng)制在對(duì)象字面量屬性中的鍵和值之間保持一致的間距 'keyword-spacing': [2, { before: true, after: true }], // 關(guān)鍵字如if/function等的間距 'new-cap': [2, { newIsCap: true, capIsNew: false }],// 允許在沒(méi)有new操作符的情況下調(diào)用大寫(xiě)啟動(dòng)的函數(shù);(默認(rèn))要求new使用大寫(xiě)啟動(dòng)函數(shù)調(diào)用所有操作符 'new-parens': 2, // JavaScript通過(guò)new關(guān)鍵字調(diào)用函數(shù)時(shí)允許省略括號(hào) 'no-array-constructor': 1, // 不允許使用Array構(gòu)造函數(shù)。除非要指定生成數(shù)組的長(zhǎng)度 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開(kāi)發(fā)環(huán)境可以使用console 'no-class-assign': 2, // 不允許修改類聲明的變量 'no-const-assign': 2, // 不能修改使用const關(guān)鍵字聲明的變量 'no-control-regex': 0, // 不允許正則表達(dá)式中的控制字符 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開(kāi)發(fā)環(huán)境可以使用debugger 'no-delete-var': 2, // 不允許在變量上使用delete操作符 'no-dupe-args': 2, // 不允許在函數(shù)聲明或表達(dá)式中使用重復(fù)的參數(shù)名稱 'no-dupe-class-members': 2, // 不允許在類成員中使用重復(fù)的參數(shù)名稱 'no-dupe-keys': 2, // 不允許在對(duì)象文字中使用重復(fù)鍵 'no-duplicate-case': 2, // 不允許在switch語(yǔ)句的case子句中使用重復(fù)的測(cè)試表達(dá)式 'no-empty-character-class': 2, // 不允許在正則表達(dá)式中使用空字符類 'no-empty-pattern': 2, // 不允許空塊語(yǔ)句 'no-eval': 2, // 不允許使用eval 'no-ex-assign': 2, // 不允許在catch子句中重新分配例外 'no-extend-native': 2, // 不允許直接修改內(nèi)建對(duì)象的原型 'no-extra-boolean-cast': 2, // 禁止不必要的布爾轉(zhuǎn)換 'no-extra-parens': [2, 'functions'], // 僅在函數(shù)表達(dá)式附近禁止不必要的括號(hào) 'no-fallthrough': 2, //消除一個(gè)案件無(wú)意中掉到另一個(gè)案件 'no-floating-decimal': 2, //消除浮點(diǎn)小數(shù)點(diǎn),并在數(shù)值有小數(shù)點(diǎn)但在其之前或之后缺少數(shù)字時(shí)發(fā)出警告 'no-func-assign': 2, // 允許重新分配function聲明 'no-implied-eval': 2, // 消除隱含eval() 'no-inner-declarations': [2, 'functions'], // 不允許function嵌套塊中的聲明 'no-invalid-regexp': 2, //不允許RegExp構(gòu)造函數(shù)中的無(wú)效正則表達(dá)式字符串 'no-irregular-whitespace': 2, //捕獲無(wú)效的空格 'no-iterator': 2, //消除陰影變量聲明 'no-label-var': 2, //禁止創(chuàng)建與范圍內(nèi)的變量共享名稱的標(biāo)簽 'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用帶標(biāo)簽的語(yǔ)句 'no-lone-blocks': 2, //消除腳本頂層或其他塊中不必要的和可能混淆的塊 'no-mixed-spaces-and-tabs': 2, // 不允許使用混合空格和制表符進(jìn)行縮進(jìn) 'no-multi-spaces': 2, // 禁止在邏輯表達(dá)式,條件表達(dá)式,聲明,數(shù)組元素,對(duì)象屬性,序列和函數(shù)參數(shù)周圍使用多個(gè)空格 'no-multi-str': 2, // 防止使用多行字符串 'no-multiple-empty-lines': [2, { max: 1 }], // 最多一個(gè)空行 'no-native-reassign': 2, // 不允許修改只讀全局變量 'no-new-object': 2, // 不允許使用Object構(gòu)造函數(shù) 'no-new-require': 2, // 消除new require表達(dá)的使用 'no-new-symbol': 2, // 防止Symbol與new 同時(shí)使用的意外錯(cuò)誤 'no-new-wrappers': 2, // 杜絕使用String,Number以及Boolean與new操作 'no-obj-calls': 2, // 不允許調(diào)用Math,JSON和Reflect對(duì)象作為功能 'no-octal': 2, // 不允許使用八進(jìn)制文字 'no-octal-escape': 2, // 不允許字符串文字中的八進(jìn)制轉(zhuǎn)義序列 'no-path-concat': 2, // 防止 Node.js 中的目錄路徑字符串連接無(wú)效 'no-redeclare': 2, // 消除在同一范圍內(nèi)具有多個(gè)聲明的變量 'no-regex-spaces': 2, // 在正則表達(dá)式文字中不允許有多個(gè)空格 'no-return-assign': [2, 'except-parens'], // 消除return陳述中的任務(wù),除非用括號(hào)括起來(lái) 'no-self-assign': 2, // 消除自我分配 'no-self-compare': 2, // 禁止比較變量與自身 'no-sequences': 2, // 禁止使用逗號(hào)運(yùn)算符 'no-sparse-arrays': 2, // 不允許稀疏數(shù)組文字 'no-this-before-super': 2, // 在呼call前標(biāo)記this/super關(guān)鍵字super() 'no-throw-literal': 2, // 不允許拋出不可能是Error對(duì)象的文字和其他表達(dá)式 'no-trailing-spaces': 2, // 不允許在行尾添加尾隨空白 'no-undef': 2, // 任何對(duì)未聲明的變量的引用都會(huì)導(dǎo)致錯(cuò)誤 'no-undef-init': 2, // 消除初始化為undefined的變量聲明 'no-underscore-dangle': 2, // 標(biāo)識(shí)符不能以_開(kāi)頭或結(jié)尾 'no-unexpected-multiline': 2, // 不允許混淆多行表達(dá)式 'no-unmodified-loop-condition': 2, // 查找循環(huán)條件內(nèi)的引用,然后檢查這些引用的變量是否在循環(huán)中被修改 'no-unneeded-ternary': [2, { defaultAssignment: false }], // 不允許將條件表達(dá)式作為默認(rèn)的分配模式 'no-unreachable': 2, // 不允許可達(dá)代碼return,throw,continue,和break語(yǔ)句后面還有語(yǔ)句。 'no-unsafe-finally': 2, // 不允許return,throw,break,和continue里面的語(yǔ)句finally塊 'no-unused-vars': [2, { vars: 'all', args: 'after-used' }], // 消除未使用的變量,函數(shù)和函數(shù)的參數(shù) // vars: 'all' 檢查所有變量的使用情況,包括全局范圍內(nèi)的變量。這是默認(rèn)設(shè)置。 args: 'after-used' 只有最后一個(gè)參數(shù)必須使用。例如,這允許您為函數(shù)使用兩個(gè)命名參數(shù),并且只要您使用第二個(gè)參數(shù),ESLint 就不會(huì)警告您第一個(gè)參數(shù)。這是默認(rèn)設(shè)置。 'no-useless-call': 2, // 標(biāo)記使用情況,F(xiàn)unction.prototype.call()并且Function.prototype.apply()可以用正常的函數(shù)調(diào)用來(lái)替代 'no-useless-computed-key': 2, // 禁止不必要地使用計(jì)算屬性鍵 'no-useless-constructor': 2, // 在不改變類的工作方式的情況下安全地移除的類構(gòu)造函數(shù) 'no-useless-escape': 0, // 禁用不必要的轉(zhuǎn)義字符 'no-whitespace-before-property': 2, // 如果對(duì)象的屬性位于同一行上,不允許圍繞點(diǎn)或在開(kāi)頭括號(hào)之前留出空白 'no-with': 2, //禁用with 'no-var': 2, // 禁用var 'one-var': [2, { initialized: 'never' }], // 強(qiáng)制將變量聲明為每個(gè)函數(shù)(對(duì)于var)或塊(對(duì)于let和const)范圍一起聲明或單獨(dú)聲明。 initialized: 'never' 每個(gè)作用域要求多個(gè)變量聲明用于初始化變量 'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 實(shí)施一致的換行 'padded-blocks': [2, 'never'], // 在塊內(nèi)強(qiáng)制執(zhí)行一致的空行填充 'prefer-destructuring': ['error', { object: false, array: false }], // 此規(guī)則強(qiáng)制使用解構(gòu)而不是通過(guò)成員表達(dá)式訪問(wèn)屬性。 'quotes': [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],// avoidEscape: true 允許字符串使用單引號(hào)或雙引號(hào),只要字符串包含必須以其他方式轉(zhuǎn)義的引號(hào) ;allowTemplateLiterals: true 允許字符串使用反引號(hào) 'radix': 2, //parseInt必須指定第二個(gè)參數(shù) 'semi': [2, 'never'], // 不使用分號(hào) 'semi-spacing': [2, { before: false, after: true }], // 強(qiáng)制分號(hào)間隔 'space-before-blocks': [2, 'always'], // 塊必須至少有一個(gè)先前的空間 'space-before-function-paren': [2, 'never'], // 在(參數(shù)后面不允許任何空格 'space-in-parens': [2, 'never'], // 禁止或要求(或)左邊的一個(gè)或多個(gè)空格 'space-infix-ops': 2, // 強(qiáng)制二元運(yùn)算符左右各有一個(gè)空格 'space-unary-ops': [2, { words: true, nonwords: false }],// words: true 如:new,delete,typeof,void,yield 左右必須有空格 // nonwords: false 一元運(yùn)算符,如:-,+,--,++,!,!!左右不能有空格 'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 注釋開(kāi)始后,此規(guī)則將強(qiáng)制間距的一致性//或/* 'template-curly-spacing': [2, 'never'], // 不允許大括號(hào)內(nèi)的空格 'use-isnan': 2, //禁止比較時(shí)使用NaN,只能用isNaN() 'valid-typeof': 2, //必須使用合法的typeof的值 'wrap-iife': [2, 'any'], //立即執(zhí)行函數(shù)表達(dá)式的小括號(hào)風(fēng)格 'yield-star-spacing': [2, 'both'], // 強(qiáng)制執(zhí)行*周圍 yield*表達(dá)式的間距,兩側(cè)都必須有空格 'yoda': [2, 'never'], 'prefer-const': 2, // 使用let關(guān)鍵字聲明的變量,但在初始分配后從未重新分配變量,應(yīng)改為const聲明 'object-curly-spacing': [2, 'always', { objectsInObjects: false }],// 不允許以對(duì)象元素開(kāi)始和/或以對(duì)象元素結(jié)尾的對(duì)象的大括號(hào)內(nèi)的間距 'array-bracket-spacing': [2, 'never'] // 不允許數(shù)組括號(hào)內(nèi)的空格 } }
2.2 eslint 安裝與配置
全局安裝 eslint
npm install -g eslint
全局安裝 Prettier
npm install -g prettier
vscode 插件市場(chǎng)搜索 eslint 和 prettier,下載并安裝。
vscode
編輯器 setting.json 中加如下配置:
/* 開(kāi)啟保存時(shí)自動(dòng)格式化 */ "editor.formatOnSave": true, /* eslint的配置 */ "eslint.enable": true, "eslint.run": "onSave", "eslint.options": { "extensions": [ ".js", ".vue" ] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 保存時(shí)自動(dòng)修復(fù) }, // 關(guān)閉 vscode 默認(rèn)的檢查工具 "html.validate.scripts": false, "javascript.validate.enable": false, "eslint.alwaysShowStatus": true, "eslint.format.enable": true, "scss.lint.duplicateProperties": "error", "css.lint.duplicateProperties": "error", "less.lint.zeroUnits": "error", "eslint.validate": [ "javascript", "javascriptreact", "vue-html", "vue", "html" ], /* prettier的配置 */ "prettier.printWidth": 120, // 超過(guò)最大值換行 "prettier.tabWidth": 2, // 縮進(jìn)字節(jié)數(shù) "prettier.useTabs": true, // 縮進(jìn)使用tab "prettier.semi": false, // 句尾添加分號(hào) "prettier.singleQuote": true, // 使用單引號(hào)代替雙引號(hào) "prettier.proseWrap": "preserve", // 默認(rèn)值。因?yàn)槭褂昧艘恍┱坌忻舾行偷匿秩酒鳎ㄈ鏕itHub comment)而按照markdown文本樣式進(jìn)行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)。avoid:省略括號(hào) "prettier.bracketSpacing": true, // 在對(duì)象,數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }" "prettier.endOfLine": "auto", // 結(jié)尾是 \n \r \n\r auto "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫(xiě)在項(xiàng)目的.prettierignore文件中 "prettier.requireConfig": false, // Require a "prettierconfig" to format prettier "prettier.trailingComma": "none", // 在對(duì)象或數(shù)組最后一個(gè)元素后面是否加逗號(hào) /* 每種語(yǔ)言默認(rèn)的格式化規(guī)則 */ "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
使用 vuecli 創(chuàng)建項(xiàng)目時(shí),不選擇 lint 選項(xiàng)。
在項(xiàng)目開(kāi)發(fā)依賴中,加入@vue/cli-plugin-eslint、babel-eslint、eslint、eslint-plugin-vue、prettier、prettier-eslint 依賴
npm install @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue prettier prettier-eslint –-save-dev
在項(xiàng)目 package.json 內(nèi)加入 lint 命令。
開(kāi)發(fā)時(shí),保存文件,即可按 prettier 規(guī)則格式化文件,并自動(dòng)修復(fù)可修復(fù)的 issue,不能自動(dòng)修復(fù)的,請(qǐng)根據(jù)提示,手動(dòng)修復(fù)。
提示:vscode 已設(shè)置保存時(shí)格式化,但有時(shí)并不會(huì)格式化文件。已保存的文件還存在報(bào)錯(cuò)的,請(qǐng)手動(dòng)格式化,并修改相應(yīng)問(wèn)題后,再次保存。
提交代碼前,運(yùn)行 npm run lint 代碼風(fēng)格檢查,確認(rèn)無(wú)誤后再進(jìn)行提交。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue數(shù)據(jù)更新了但在頁(yè)面上沒(méi)有顯示出來(lái)的解決方法
有時(shí)候 vue 無(wú)法監(jiān)聽(tīng)到數(shù)據(jù)的變化,導(dǎo)致數(shù)據(jù)變化但是視圖沒(méi)有變化,也就是數(shù)據(jù)更新了,但在頁(yè)面上沒(méi)有顯示出來(lái),所以本文給出了三種解決方法,通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫(kù),可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例
今天小編就為大家分享一篇vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue通過(guò)笛卡兒積實(shí)現(xiàn)sku庫(kù)存配置方式
這篇文章主要介紹了vue通過(guò)笛卡兒積實(shí)現(xiàn)sku庫(kù)存配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目,對(duì)Vue感興趣的同學(xué),一定要看一下2021-05-05vue踩坑日記之params傳遞參數(shù)問(wèn)題
這篇文章主要介紹了vue踩坑日記之params傳遞參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05