vue?如何配置eslint代碼檢查
1.安裝依賴
"eslint": "^5.12.0", "eslint-config-standard": "^12.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.1.1", "eslint-plugin-import": "^2.14.0", "eslint-plugin-node": "^8.0.1", "eslint-plugin-promise": "^4.0.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^5.1.0", "acorn": "^6.0.5", "babel-eslint": "^8.2.1",
2.webstorm代碼格式化快捷鍵為win + alt + L
在webstorm preference里面找到code style,在里面設(shè)置webstorm代碼快捷格式化選項(xiàng)。
比如這里勾選上in empty tag時(shí),當(dāng)我們按win + alt + L格式化代碼時(shí),就會(huì)自動(dòng)在閉合標(biāo)簽前面添加空格。
如果webstorm格式化與eslint規(guī)則沖突,大多時(shí)候也可以從這里設(shè)置規(guī)則。


3.設(shè)置webstorm校驗(yàn)規(guī)則為本地項(xiàng)目安裝的eslint
如下:

4.在項(xiàng)目本地新建.editorconfig文件
設(shè)置webstorm格式。
root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true in_empty_tag = true
5.在項(xiàng)目本地新建.eslintrc.js文件
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"vue/no-use-v-if-with-v-for": ["error", {
"allowUsingIterationVar": false
}],
"vue/return-in-computed-property": ["error", {
"treatUndefinedAsUnspecified": false
}],
"vue/no-unused-components": ["error", {
"ignoreWhenBindingPresent": true
}],
"vue/attribute-hyphenation": ["error", "always", {
"ignore": []
}],
"vue/component-name-in-template-casing": ["error", "kebab-case", {
"ignores": []
}],
"vue/html-closing-bracket-newline": ["error", {
"singleline": "never",
"multiline": "always"
}],
"vue/html-closing-bracket-spacing": ["error", {
"startTag": "never",
"endTag": "never",
"selfClosingTag": "always"
}],
"vue/html-indent": ["error", 2, {
"attribute": 1,
"baseIndent": 1,
"closeBracket": 0,
"alignAttributesVertically": true,
"ignores": []
}],
"vue/html-quotes": ["error", "double"],
"vue/html-self-closing": ["error", {
"html": {
"void": "never",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}],
"vue/max-attributes-per-line": ["error", {
"singleline": 3,
"multiline": {
"max": 3,
"allowFirstLine": true
}
}],
"vue/multiline-html-element-content-newline": ["error", {
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea"]
}],
"vue/mustache-interpolation-spacing": ["error", "always"],
"vue/name-property-casing": ["error", "kebab-case"],
"vue/no-multi-spaces": ["error", {
"ignoreProperties": false
}],
"vue/no-spaces-around-equal-signs-in-attribute": ["error"],
"vue/no-template-shadow": ["error"],
"vue/prop-name-casing": ["error", "camelCase"],
"vue/require-default-prop": ["error"],
"vue/v-bind-style": ["error", "shorthand"],
"vue/v-on-style": ["error", "shorthand"],
"vue/attributes-order": ["error", {
"order": [
"DEFINITION",
"LIST_RENDERING",
"CONDITIONALS",
"RENDER_MODIFIERS",
"GLOBAL",
"UNIQUE",
"TWO_WAY_BINDING",
"OTHER_DIRECTIVES",
"OTHER_ATTR",
"EVENTS",
"CONTENT"
]
}],
"vue/order-in-components": ["error", {
"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"
]
}],
"vue/this-in-template": ["error", "never"]
}
}以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js前后端數(shù)據(jù)交互相關(guān)的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-04-04
Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn)
本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件詳解
這篇文章主要給大家介紹了關(guān)于前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件的相關(guān)資料,form-generator是一個(gè)開源的表單生成器,可以幫助我們快速構(gòu)建各種表單頁面,需要的朋友可以參考下2023-11-11
前端Vue手機(jī)號校驗(yàn)以及后端Java手機(jī)號校驗(yàn)例子
接收一個(gè)輸入的手機(jī)號,判斷輸入的手機(jī)號是否正確是一個(gè)很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機(jī)號校驗(yàn)以及后端Java手機(jī)號校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2023-11-11
Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個(gè)基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01

