按照个人喜好 (@the1812) 配置的 ESLint Config. 可用于 JavaScript, TypeScript 和 Vue 3 项目.
集成 prettier
一个命令搞定代码风格和格式化, 无需担心互相冲突.
# ✔️
eslint . --ext .ts,.vue
# ❌
eslint . --ext .ts,.vue
prettier . --write内置 prettier 的配置为:
{
semi: false,
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
endOfLine: 'auto',
printWidth: 100,
}除纯类型引用以外, 所有定义必须先声明再使用.
// ✔️
function name() { }
const a = name()
// ❌
const a = name()
function name() { }跟丑陋的全大写和下划线说再见.
// ✔️
const SomeConstant = 1
function someFunction (param) {
const clonedParam = clone(param)
}
let someVar = 2
// ❌
const SOME_CONSTANT = 1
function someFunction (param) {
const _param = clone(param)
}
let some_var = 2同名属性优先解构, 同名参数省略冒号.
// ✔️
const { prop } = obj
const param = {
prop,
}
// ❌
const prop = obj.prop
const param = {
prop: prop,
}有意义的名字才是好名字.
// ✔️
export const createApp = () => { }
// ❌
const createApp = () => { }
export default createApp[!NOTE] 其他常见第三方库的配置文件仍然允许默认导出. 例如
webpack.config.ts,vite.config.ts等.
控制流语句内容必须有大括号.
// ✔️
if (foo) {
doSomething()
}
while (bar) {
doSomething()
}
for (let i = 0; i < items.length; i+=1) {
doSomething()
}
// ❌
if (foo) doSomething()
while (bar) doSomething()
for (let i = 0; i < items.length; i+=1)
doSomething()需要安装包本身和所有的 peerDependencies.
pnpm install -D eslint @the1812/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue也可以使用 install-peerdeps 来简化命令.
pnpx install-peerdeps @the1812/eslint-config -D -P在 ESLint 配置文件中添加任意一种配置.
// .eslintrc.cjs
module.exports = {
extends: ['@the1812/eslint-config'],
// ...
}// .eslintrc.cjs
module.exports = {
extends: ['@the1812/eslint-config/vue'],
// ...
}