vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法-創(chuàng)新互聯(lián)

1.前言

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,清豐企業(yè)網(wǎng)站建設,清豐品牌網(wǎng)站建設,網(wǎng)站定制,清豐網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,清豐網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

在團隊協(xié)作中，為避免低級 Bug、以及團隊協(xié)作時不同代碼風格對彼此造成的困擾與影響，會預先制定編碼規(guī)范。使用 Lint 工具和代碼風格檢測工具，則可以輔助編碼規(guī)范執(zhí)行，有效控制代碼質(zhì)量。EsLint 則是其中一個很好的工具。

EsLint 提供以下支持：

ES6
AngularJS
JSX
Style 檢查
自定義錯誤和提示

EsLint 提供以下幾種校驗：

語法錯誤校驗
不重要或丟失的標點符號，如分號
未被使用的參數(shù)提醒
漏掉的結束符，如}
確保樣式的統(tǒng)一規(guī)則，如 sass 或者 less
檢查變量的命名
影響性能的代碼提醒，如 v-if 和 v-for 同時使用

2.eslint 配置

2.1 代碼規(guī)范

本項目基本規(guī)范是依托于 vue 官方的eslint-plugin-vue。并使用 Prettier 格式化代碼，使樣式與規(guī)則保持一致。
.eslintrc.js 配置如下：

{
root: true, // 當前配置為根配置，將不再從上級文件夾查找配置
parserOptions: {
 parser: 'babel-eslint', // 采用 babel-eslint 作為語法解析器
 sourceType: 'module',  // 指定來源的類型，有兩種script或module
 ecmaVersion: 6, //指定ECMAScript支持的版本，6為ES6
},
env: {
 browser: true, // 設置為所需檢查的代碼是在瀏覽器環(huán)境運行的
 es6: true // 設置所需檢查代碼為 es6 語法書寫
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],// 擴展使用 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右括號在新的一行
  'vue/no-v-html': 'off', // 不使用v-html
  'vue/html-self-closing': 0, // 忽略html標簽自閉合
  'accessor-pairs': 2, // 應同時設置setter和getter
  'arrow-spacing': [2, { before: true, after: true }], // 箭頭間距
  'vue/require-default-prop': 0, // 不檢查默認屬性
  'vue/require-prop-types': 0, // 不檢查默認類型
  'block-spacing': [2, 'always'], // 塊間距
  'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括號樣式允許單行
  'camelcase': [2, { properties: 'always' }], //為屬性強制執(zhí)行駝峰命名
  'comma-dangle': [2, 'never'], // 逗號不使用懸掛
  'comma-spacing': [2, { before: false, after: true }], // 逗號間距
  'comma-style': [2, 'last'], //（默認）與數(shù)組元素，對象屬性或變量聲明在同一行之后和同一行需要逗號
  'constructor-super': 2,
  'consistent-this': [2, 'that'], //強制this別名為that
  'curly': [2, 'multi-line'], // 當一個塊只包含一條語句時，不允許省略花括號。
  'dot-location': [2, 'property'], //成員表達式中的點應與屬性部分位于同一行
  'eol-last': 2, // 強制文件以換行符結束（LF）
  'eqeqeq': ['error', 'always', { null: 'ignore' }], // 強制使用全等
  'generator-star-spacing': [2, { before: true, after: true }], // 生成器中'*'兩側都要有間距
  'global-require': 1, // 所有調(diào)用require()都位于模塊的頂層
  'indent': [2, 2, { SwitchCase: 2 }], //縮進風格
  'key-spacing': [2, { beforeColon: false, afterColon: true }], // 強制在對象字面量屬性中的鍵和值之間保持一致的間距
  'keyword-spacing': [2, { before: true, after: true }], // 關鍵字如if/function等的間距
  'new-cap': [2, { newIsCap: true, capIsNew: false }],// 允許在沒有new操作符的情況下調(diào)用大寫啟動的函數(shù);（默認）要求new使用大寫啟動函數(shù)調(diào)用所有操作符
  'new-parens': 2, // JavaScript通過new關鍵字調(diào)用函數(shù)時允許省略括號
  'no-array-constructor': 1, // 不允許使用Array構造函數(shù)。除非要指定生成數(shù)組的長度
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開發(fā)環(huán)境可以使用console
  'no-class-assign': 2, // 不允許修改類聲明的變量
  'no-const-assign': 2, // 不能修改使用const關鍵字聲明的變量
  'no-control-regex': 0, // 不允許正則表達式中的控制字符
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開發(fā)環(huán)境可以使用debugger
  'no-delete-var': 2, // 不允許在變量上使用delete操作符
  'no-dupe-args': 2, // 不允許在函數(shù)聲明或表達式中使用重復的參數(shù)名稱
  'no-dupe-class-members': 2, // 不允許在類成員中使用重復的參數(shù)名稱
  'no-dupe-keys': 2, // 不允許在對象文字中使用重復鍵
  'no-duplicate-case': 2, // 不允許在switch語句的case子句中使用重復的測試表達式
  'no-empty-character-class': 2, // 不允許在正則表達式中使用空字符類
  'no-empty-pattern': 2, // 不允許空塊語句
  'no-eval': 2, // 不允許使用eval
  'no-ex-assign': 2, // 不允許在catch子句中重新分配例外
  'no-extend-native': 2, // 不允許直接修改內(nèi)建對象的原型
  'no-extra-boolean-cast': 2, // 禁止不必要的布爾轉(zhuǎn)換
  'no-extra-parens': [2, 'functions'], // 僅在函數(shù)表達式附近禁止不必要的括號
  'no-fallthrough': 2, //消除一個案件無意中掉到另一個案件
  'no-floating-decimal': 2, //消除浮點小數(shù)點，并在數(shù)值有小數(shù)點但在其之前或之后缺少數(shù)字時發(fā)出警告
  'no-func-assign': 2, // 允許重新分配function聲明
  'no-implied-eval': 2, // 消除隱含eval()
  'no-inner-declarations': [2, 'functions'], // 不允許function嵌套塊中的聲明
  'no-invalid-regexp': 2, //不允許RegExp構造函數(shù)中的無效正則表達式字符串
  'no-irregular-whitespace': 2, //捕獲無效的空格
  'no-iterator': 2, //消除陰影變量聲明
  'no-label-var': 2, //禁止創(chuàng)建與范圍內(nèi)的變量共享名稱的標簽
  'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用帶標簽的語句
  'no-lone-blocks': 2, //消除腳本頂層或其他塊中不必要的和可能混淆的塊
  'no-mixed-spaces-and-tabs': 2, // 不允許使用混合空格和制表符進行縮進
  'no-multi-spaces': 2, // 禁止在邏輯表達式，條件表達式，聲明，數(shù)組元素，對象屬性，序列和函數(shù)參數(shù)周圍使用多個空格
  'no-multi-str': 2, // 防止使用多行字符串
  'no-multiple-empty-lines': [2, { max: 1 }], // 最多一個空行
  'no-native-reassign': 2, // 不允許修改只讀全局變量
  'no-new-object': 2, // 不允許使用Object構造函數(shù)
  'no-new-require': 2, // 消除new require表達的使用
  'no-new-symbol': 2, // 防止Symbol與new 同時使用的意外錯誤
  'no-new-wrappers': 2, // 杜絕使用String，Number以及Boolean與new操作
  'no-obj-calls': 2, // 不允許調(diào)用Math，JSON和Reflect對象作為功能
  'no-octal': 2, // 不允許使用八進制文字
  'no-octal-escape': 2, // 不允許字符串文字中的八進制轉(zhuǎn)義序列
  'no-path-concat': 2, // 防止 Node.js 中的目錄路徑字符串連接無效
  'no-redeclare': 2, // 消除在同一范圍內(nèi)具有多個聲明的變量
  'no-regex-spaces': 2, // 在正則表達式文字中不允許有多個空格
  'no-return-assign': [2, 'except-parens'], // 消除return陳述中的任務，除非用括號括起來
  'no-self-assign': 2, // 消除自我分配
  'no-self-compare': 2, // 禁止比較變量與自身
  'no-sequences': 2, // 禁止使用逗號運算符
  'no-sparse-arrays': 2, // 不允許稀疏數(shù)組文字
  'no-this-before-super': 2, // 在呼call前標記this/super關鍵字super()
  'no-throw-literal': 2, // 不允許拋出不可能是Error對象的文字和其他表達式
  'no-trailing-spaces': 2, // 不允許在行尾添加尾隨空白
  'no-undef': 2, // 任何對未聲明的變量的引用都會導致錯誤
  'no-undef-init': 2, // 消除初始化為undefined的變量聲明
  'no-underscore-dangle': 2, // 標識符不能以_開頭或結尾
  'no-unexpected-multiline': 2, // 不允許混淆多行表達式
  'no-unmodified-loop-condition': 2, // 查找循環(huán)條件內(nèi)的引用，然后檢查這些引用的變量是否在循環(huán)中被修改
  'no-unneeded-ternary': [2, { defaultAssignment: false }], // 不允許將條件表達式作為默認的分配模式
  'no-unreachable': 2, // 不允許可達代碼return，throw，continue，和break語句后面還有語句。
  'no-unsafe-finally': 2, // 不允許return，throw，break，和continue里面的語句finally塊
  'no-unused-vars': [2, { vars: 'all', args: 'after-used' }],
  // 消除未使用的變量，函數(shù)和函數(shù)的參數(shù)
  // vars: 'all' 檢查所有變量的使用情況，包括全局范圍內(nèi)的變量。這是默認設置。 args: 'after-used' 只有最后一個參數(shù)必須使用。例如，這允許您為函數(shù)使用兩個命名參數(shù)，并且只要您使用第二個參數(shù)，ESLint 就不會警告您第一個參數(shù)。這是默認設置。
  'no-useless-call': 2, // 標記使用情況，F(xiàn)unction.prototype.call()并且Function.prototype.apply()可以用正常的函數(shù)調(diào)用來替代
  'no-useless-computed-key': 2, // 禁止不必要地使用計算屬性鍵
  'no-useless-constructor': 2, // 在不改變類的工作方式的情況下安全地移除的類構造函數(shù)
  'no-useless-escape': 0, // 禁用不必要的轉(zhuǎn)義字符
  'no-whitespace-before-property': 2, // 如果對象的屬性位于同一行上，不允許圍繞點或在開頭括號之前留出空白
  'no-with': 2, //禁用with
  'no-var': 2, // 禁用var
  'one-var': [2, { initialized: 'never' }], // 強制將變量聲明為每個函數(shù)（對于var）或塊（對于let和const）范圍一起聲明或單獨聲明。 initialized: 'never' 每個作用域要求多個變量聲明用于初始化變量
  'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 實施一致的換行
  'padded-blocks': [2, 'never'], // 在塊內(nèi)強制執(zhí)行一致的空行填充
  'prefer-destructuring': ['error', { object: false, array: false }], // 此規(guī)則強制使用解構而不是通過成員表達式訪問屬性。
  'quotes': [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],// avoidEscape: true 允許字符串使用單引號或雙引號，只要字符串包含必須以其他方式轉(zhuǎn)義的引號 ;allowTemplateLiterals: true 允許字符串使用反引號
  'radix': 2, //parseInt必須指定第二個參數(shù)
  'semi': [2, 'never'], // 不使用分號
  'semi-spacing': [2, { before: false, after: true }], // 強制分號間隔
  'space-before-blocks': [2, 'always'], // 塊必須至少有一個先前的空間
  'space-before-function-paren': [2, 'never'], // 在(參數(shù)后面不允許任何空格
  'space-in-parens': [2, 'never'], // 禁止或要求（或）左邊的一個或多個空格
  'space-infix-ops': 2, // 強制二元運算符左右各有一個空格
  'space-unary-ops': [2, { words: true, nonwords: false }],// words: true 如：new，delete，typeof，void，yield 左右必須有空格 // nonwords: false 一元運算符，如：-，+，--，++，!，!!左右不能有空格
  'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 注釋開始后，此規(guī)則將強制間距的一致性//或/*
  'template-curly-spacing': [2, 'never'], // 不允許大括號內(nèi)的空格
  'use-isnan': 2, //禁止比較時使用NaN，只能用isNaN()
  'valid-typeof': 2, //必須使用合法的typeof的值
  'wrap-iife': [2, 'any'], //立即執(zhí)行函數(shù)表達式的小括號風格
  'yield-star-spacing': [2, 'both'], // 強制執(zhí)行*周圍 yield*表達式的間距，兩側都必須有空格
  'yoda': [2, 'never'],
  'prefer-const': 2, // 使用let關鍵字聲明的變量，但在初始分配后從未重新分配變量，應改為const聲明
  'object-curly-spacing': [2, 'always', { objectsInObjects: false }],// 不允許以對象元素開始和/或以對象元素結尾的對象的大括號內(nèi)的間距
  'array-bracket-spacing': [2, 'never'] // 不允許數(shù)組括號內(nèi)的空格
 }
}

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁名稱：vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article24/dcjeje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、軟件開發(fā)、靜態(tài)網(wǎng)站、商城網(wǎng)站、云服務器、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容