vue項目內建eslint
(1)dev依賴：
// eslint
// babel-eslint
// eslint-loader
// eslint-friendly-formatter
// eslint-plugin-html
npm install eslint babel-eslint eslint-loader eslint-friendly-formatter eslint-plugin-html -D
(2)項目中添加檔案.eslintrc.js
// .eslintrc.js
module.exports = {
// 停止在父級目錄中尋找 .eslintrc.*
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
// 添加可能會用到的全局變量
// 設定為 false 不允許被重寫
globals: {
"Vue": false,
"UE": false,
"BMAP": false,
"AMap": false,
"AMapUI": false,
"BMap": false,
"BMapLib": false
},
env: {
// 浏覽器全局變量
browser: true,
// Node.js 全局變量和 Node.js 作用域
node: true,
// 啟用 ES6 文法支援 及 新的 ES6 全局變量
es6: true,
},
// 1. plugin:vue/recommended
// 規則配置參考: https://eslint.vuejs.org/rules/
// 2. eslint:recommended
// eslint:recommended是ESLint 的推薦規則配置，包含了ESLint的規則裡前面有??的部分，recommended 規則隻在ESLint更新大版本的才有可能改變。
// 規則配置參考: https://eslint.org/docs/rules/
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// 'off' 或 0 - 關閉規則
// 'warn' 或 1 - 開啟規則，使用警告級别的錯誤：warn (不會導緻程式退出)
// 'error' 或 2 - 開啟規則，使用錯誤級别的錯誤：error (當被觸發的時候，程式會退出)
rules: {
// v-for 指令的元素必須有 v-bind:key
'vue/require-v-for-key': 2,
// 元件的屬性必須為一定的順序
'vue/order-in-components': [2, {
'order': [
'el',
'name',
'parent',
'functional',
['delimiters', 'comments'],
['components', 'directives', 'filters'],
'extends',
'mixins',
'inheritAttrs',
'model',
['props', 'propsData'],
'data',
'computed',
'watch',
'LIFECYCLE_HOOKS',
'methods',
['template', 'render'],
'renderError'
]
}],
// 使用元件時，命名需要以snake-case來進行
"vue/component-name-in-template-casing": [2, "kebab-case", {
"ignores": []
}],
// v-for指令與scope屬性裡定義的值需要被使用
"vue/no-unused-vars": [1, {
'vars': 'local',
'args': 'none'
}],
// 強制後括弧不換行
"vue/html-closing-bracket-newline": [2, {
"singleline": "never",
"multiline": "never"
}],
// 禁止出現重複的屬性
'vue/no-duplicate-attributes': 2,
// v-cloak 指令的使用必須合法
'vue/valid-v-cloak': 2,
// 使用元件時，命名需要以snake-case來進行
"vue/component-name-in-template-casing": [2, "kebab-case", {
// "registeredComponentsOnly": true,
"ignores": []
}],
// 強制 getter 和 setter 在對象中成對出現
'accessor-pairs': 2,
// 強制箭頭函數的箭頭前後使用一緻的空格
'arrow-spacing': [2, {
'before': true,
'after': true
}],
// 強制在代碼塊中開括号前和閉括号後有空格
'block-spacing': [2, 'always'],
// 強制在代碼塊中使用一緻的大括号風格
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
// 強制使用駱駝拼寫法命名約定
'camelcase': [0, {
'properties': 'always'
}],
// 要求或禁止末尾逗号
'comma-dangle': [2, 'never'],
// 強制在逗号前後使用一緻的空格
'comma-spacing': [2, {
'before': false,
'after': true
}],
// 強制使用一緻的逗号風格
'comma-style': [2, 'last'],
// 強制所有控制語句使用一緻的括号風格, multi-line指定在單行時可以不使用大括号，多行時必須有大括号
'curly': [2, 'multi-line'],
// 強制在點号之前和之後一緻的換行，property指定換行時的.跟随property屬性
'dot-location': [2, 'property'],
// 要求或禁止檔案末尾存在空行
'eol-last': 2,
// 要求使用 === 和 !==
'eqeqeq': [2, 'allow-null'],
// 強制 generator 函數中 * 号周圍使用一緻的空格
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
// 強制使用一緻的縮進
'indent': [2, 2, {
// 使用switch與case時需要在case前進行縮進處理
'SwitchCase': 1
}],
// 強制在對象字面量的屬性中鍵和值之間使用一緻的間距, { property: 1 }
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
// 強制在關鍵字前後使用一緻的空格， eg: else 前後空格
'keyword-spacing': [2, {
'before': true,
'after': true
}],
// 要求構造函數首字母大寫
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
// 強制或禁止調用無參構造函數時有圓括号
'new-parens': 2,
// 禁用 Array 構造函數
'no-array-constructor': 2,
// 禁用 arguments.caller 或 arguments.callee
'no-caller': 2,
// 禁用 console
'no-console': 'off',
// 禁用 eval()
'no-eval': 2,
// 禁止擴充原生類型
'no-extend-native': 2,
// 禁止不必要的 .bind() 調用
'no-extra-bind': 2,
// 禁止不必要的括号, functions指定僅在函數表達式附近禁止不必要的括号
'no-extra-parens': [2, 'functions'],
// 禁止數字字面量中使用前導和末尾小數點
'no-floating-decimal': 2,
// 禁止使用類似 eval() 的方法
'no-implied-eval': 2,
// 禁用 __iterator__ 屬性
'no-iterator': 2,
// 禁用标簽語句
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
// 禁用不必要的嵌套塊
'no-lone-blocks': 2,
// 禁止出現多行空行
'no-multiple-empty-lines': [2, {
'max': 1
}],
// 禁用 Object 的構造函數
'no-new-object': 2,
// 禁止調用 require 時使用 new 操作符
'no-new-require': 2,
// 禁止對 String，Number 和 Boolean 使用 new 操作符
'no-new-wrappers': 2,
// 禁止對 __dirname 和 __filename 進行字元串連接配接
'no-path-concat': 2,
// 禁止直接調用 __proto__ 屬性
'no-proto': 2,
// 禁止在 return 語句中使用指派語句
'no-return-assign': [2, 'except-parens'],
// 禁止自身比較
'no-self-compare': 2,
// 要求或禁止在函數辨別符和其調用之間有空格
'func-call-spacing': 2,
// 禁止抛出異常字面量
'no-throw-literal': 2,
// 禁用行尾空格
'no-trailing-spaces': 2,
// 禁止可以在有更簡單的可替代的表達式時使用三元操作符
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
// 禁止出現未使用過的變量
// 有時會出現諸如const {a, b, ...form} = res,可能會有意想不到的問題,考慮忽略單次檢查
'no-unused-vars': [2, {
'vars': 'local',
'args': 'none'
}],
// 禁止不必要的 .call() 和 .apply()
'no-useless-call': 2,
// 禁止在對象中使用不必要的計算屬性
'no-useless-computed-key': 2,
// 禁用不必要的構造函數
'no-useless-constructor': 2,
// 禁用不必要的轉義字元
'no-useless-escape': 0,
// 禁止屬性前有空白
'no-whitespace-before-property': 2,
// 禁用 with 語句
'no-with': 2,
// 強制操作符使用一緻的換行符
'operator-linebreak': [2, 'after', {
'overrides': {
'': 'before',
':': 'before'
}
}],
// 要求或禁止塊内填充
'padded-blocks': [2, 'never'],
// 強制使用一緻的反引号、雙引号或單引号
'quotes': [2, 'single', {
'avoidEscape': true,
// 允許使用反引号
'allowTemplateLiterals': true
}],
// 禁止使用分号
'semi': [2, 'never'],
// 強制在塊之前使用一緻的空格
'space-before-blocks': [2, 'always'],
// 強制在 function的左括号之前使用一緻的空格
'space-before-function-paren': [2, 'never'],
// 強制在圓括号内使用一緻的空格
'space-in-parens': [2, 'never'],
// 要求操作符周圍有空格
'space-infix-ops': 2,
// 強制在一進制操作符前後使用一緻的空格
'space-unary-ops': [2, {
'words': true, // 适用于單詞類一進制操作符，例如：new、delete、typeof、void、yield
'nonwords': false // 适用于這些一進制操作符: -、+、--、++、!、!!
}],
// 強制在注釋中 // 或 /* 使用一緻的空格
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
// 要求或禁止模闆字元串中的嵌入表達式周圍空格的使用
'template-curly-spacing': [2, 'never'],
// 要求 IIFE (-- 立即執行函數) 使用括号括起來
'wrap-iife': [2, 'any'],
// 禁用 debugger
'no-debugger': process.env.NODE_ENV === 'production' 2 : 0,
// 強制在對象中的大括号中使用一緻的空格
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
// 強制數組方括号中使用一緻的空格 類似于這個['foo', 'bar', 'baz']
'array-bracket-spacing': [2, 'never']
}
}
(3)vsCode 安裝擴充 ESlint Vetur
安裝好了之後，會自動根據你上面配置的規則進行代碼檢查，不合格的會高亮顯示
(4)儲存的時候自動格式化
MAC上：code → preferente → setting
Windows上：檔案 →首選項 → 設定
搜尋Code Action On Save→ 選擇Edit in setting.json，添加如下代碼
"eslint.codeActionsOnSave.mode": "problems",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
這樣在儲存的時候就會根據項目配置的eslint的規則自動檢查代碼，并修複那些可以被修複的問題，不能被修複的問題會被高亮提示出來人工進行修複。
參考：https://blog.csdn.net/qq_37148270/article/details/106763097
vue項目內建eslint 相關文章
webpack的基本使用
在項目根目錄下面建立一個webpack.config.js檔案，webpack運作的環境為nodejs環境，是以此檔案中的子產品化規範為commonjs規範寫法 // webpack運作node環境的// 此處的子產品化規範為 commonjs規範 module.exports 導出 導入 require// const path = require('pa
一行代碼下載下傳全網視訊這個項目做到了！
阿喵經常看劇，也經常逛github，最近看到的一個項目十分驚豔，它可以一行指令下載下傳很多網站的視訊，小編當時就震驚了！ 該項目名為you-get！ 項目位址是：https://github.com/soimort/you-get 目前已經有39k star！真是相當的火爆了！ 說一下大家熟悉的網站，
TestCafe 快速上手 (三) - 項目
環境安裝 node.js 項目結構 configuration file 簡易配置： { "src": "./testcase", "selectorTimeout": 180000, "pageLoadTimeout": 180000, "assertionTimeout": 180000, "speed": 1, "developmentMode": true, "concurrency": 1, "port1":1337, "port2":
記錄一次Vue3.0體驗
Vue 3.0 體驗 并不是按照正常項目流程來體驗,而是挑揀官方釋出差別于之前版本的版塊 基于版本: 起步：通過腳手架 vue-cli 安裝：首先全局更新最新版的 Vue CLI，4.5.0以上版本支援 Vue3 npm install -g @vue/cli # OR yarn global add @vue/clivue create he
vue動态元件
如果我們不想讓也面初始化的時候就加載所有的元件，就會用到動态元件 常用的場景是多tab的頁面，每一個tab是一個元件這種 示例1：這是沒有使用動态元件的時候 template div button @click="check"{{ !show "展示元件" : "隐藏元件" }}/button ccc v-if="show
vue-router的使用之如何讓導航欄實作一種動态資料 與 如何實作導航欄重新整理頁面保持狀态不變
1.建立vue,手動預設 2.選擇以下兩種,預設選擇router之後，在package.json的dependencies中可以看到vue-router 3.預設完成後，項目啟動 4.建立vue架構； 隻關注src,先從main.js開始 5.手動預設添加router之後，在main.js中，此時已自動引入router，而且挂載了
Azure Functions(二)內建 Azure Blob Storage 存儲檔案
一，引言 上一篇文章有介紹到什麼是 SeverLess ，ServerLess 都有哪些特點，以及多雲環境下 ServerLess 都有哪些解決方案。在這衆多解決方案中就包括 Function App(Azure 下的ServerLess)，今天我們結合之前所講的 Azure Functions 以及 Azure Blob Storag
spring boot內建Mybatis(1)
概述 MyBatis是一個開源的持久層架構，現在網際網路項目使用比較多，MyBatis簡化了Java應用程式中對資料庫的通路，實作了諸如動态SQL、結果集映射等，高效又不失靈活，簡單地說，它是JDBC和Hibernate的替代品，個人在項目中傾向使用mybatis。本文介紹在spring
在Nuxt.js如何使用Vuex最新教程
在項目開發過程中，遇到vuex報錯 Classic mode for store/ is deprecated and will be removed in Nuxt 3. 在nuxt官網查了一下發現是不建議使用這種文法 在 nuxtjs 更新到2.4之後，采用舊的 store 配置方式，配置 vuex 将會報錯 nuxt中vuex 老版本寫法 store
如何讓别人pip install自己的包
1.建構項目目錄結構 結構如圖所示： 檔案介紹：LICENSE和README.md在git建倉庫時選上，克隆下來就會有，license最好選擇MIT的。sort.py檔案裡随便寫個方法用于直接調用；__init__.py檔案初始化用，可如下所示。setup.py啟動用，可如下所示。 __init__.py fro