在Vue項目中,使用ESLint可以幫助我們規范代碼風格,避免一些常見的錯誤。下面是ESLint配置Vue項目的方法:
// 安裝相關依賴
npm install eslint eslint-plugin-vue babel-eslint --save-dev
// 初始化ESLint配置文件
npx eslint --init
// 在.eslintrc.js中添加如下規則
module.exports = {
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': 'off', // 禁止使用console
'vue/max-attributes-per-line': [
2,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false
}
}
],
'vue/prop-name-casing': ['error', 'camelCase'], // prop命名
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'always'
}
],
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
},
plugins: ['vue']
}
以上配置為常用規則及推薦規則,可以根據實際情況進行調整,也可以參考Vue文檔中提供的ESLint配置。
上一篇mac vue配置
下一篇css下拉框列表字體