一、ESLint基礎(chǔ)
// 安裝
yarn add eslint --dev
eslint --version
// 初始化一個配置.eslintrc.js
eslint --init
// 檢查文件
eslint [文件路徑]
// 自動修復(fù)
eslint [文件路徑] --fix
二蛔琅、ESLint配置文件
module.exports = {
// 瀏覽器環(huán)境， 可以設(shè)置多個,如：node: true,
env: {
browser: false,
es6: false
},
extends: [
// 繼承其他規(guī)則峻呛，/node-modules/eslint-config-standard包中
'standard'
],
// 只語法檢查, 不檢查es+新對象是否可用
parserOptions: {
ecmaVersion: 2015
},
rules: {
// 0=off, 1=warn, 2=error
// 使用數(shù)字或者字符串都可以
'no-alert': "error"
},
globals: {
// 全局注冊一個jQuery只讀變量
"jQuery": "readonly"
}
}
image.png
三罗售、ESLint 配置注釋
eslint-disable-line標(biāo)識不處理
ESLint規(guī)則
// 添加eslint-disable-line標(biāo)識不處理這行錯誤
// 添加no-template-curly-in-string 標(biāo)識代表不處理這個指定的錯誤
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
四、ESLint結(jié)合gulp
// gulp-eslint
// gulpfile.js
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
// 對源代碼檢查
.pipe(plugins.eslint())
// 格式輸出
.pipe(plugins.eslint.format())
// 發(fā)現(xiàn)問題立即停止
.pipe(plugins.eslint.failAfterError())
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
四钩述、ESLint結(jié)合webpack
針對React沒有使用的報錯寨躁， 需要使用eslint-plugin-react
error 'React' is defined but never used
// 1
rules: {
// 2代表error
// 避免定義了React，但是沒有使用的報錯
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2
},
plugins: [
// eslint-plugin-react
'react'
]
// 2
extends: [
'standard',
// 共享配置
// eslint-plugin-react提交了2個共享配置牙勘，all 和 recommended
'plugin:react/recommended'
],
五职恳、ESLint結(jié)合ts
需要配置語法解析器
parser: '@typescript-eslint/parser'
六、Stylelint-校驗CSS的工具
// 命令
yarn stylelint [文件名]
// .stylelintrc.js
module.exports = {
extends: [
// 共享配置, 需要完整的名字
"stylelint-config-standard",
// sass代碼
"stylelint-config-sass-guidelines"
]
}
七方面、prettier-校驗所有文件工具
// 默認(rèn)會把校驗后的信息打印在控制臺放钦，需要使用write進(jìn)行文件寫入
prettier [文件名] --write
// . 代表所有文件
prettier . --write
