eslint
通用配置
eslint 使用版本优先级 项目安装 eslint(推荐使用) 全局安装的 eslint
忽略文件
一般用于第三方 lib 库, 自动生成代码等。
// .eslintignore 文件
/assets/js/iconfont/*
/src/service/*
/dist
**/iconfont/**
*/qiyu.ts
禁用规则
全局禁用需要去配置文件设置规则,不再赘述。
禁用这个文件推荐使用忽略文件配置,不再赘述。
示例局部禁用某条规则的场景,非必要不推荐使用
// 区间内全部禁用 禁止使用console和 alert
/* eslint-disable no-alert, no-console */
alert("foo");
console.log("bar");
/* eslint-enable no-alert, no-console */
// 下一行禁用 禁止使用console规则
/* eslint-disable-next-line no-console */
console.log("bar");
// 当前行禁用 禁止使用console规则
console.log("bar"); /* eslint-disable-line no-console */
Vue3 eslint 推荐配置
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended", // 如果有ts
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": "warn",
"no-debugger": "warn",
"@typescript-eslint/no-var-requires": 0,
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-empty-function": 0,
"vue/no-deprecated-slot-attribute": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-inferrable-types": "off",
"prettier/prettier": 0,
"prefer-const": 0,
"vue/multi-word-component-names": 0,
"@typescript-eslint/no-this-alias": [
"error",
{
allowDestructuring: true, // Allow `const { props, state } = this`; false by default
allowedNames: ["_self"], // Allow `const vm= this`; `[]` by default
},
],
"@typescript-eslint/ban-types": 0, // allow Function type
},
// ignorePatterns: ['**/*/*.js'],
};
React eslint 推荐配置
module.exports = {
extends: [require.resolve("@umijs/fabric/dist/eslint")],
rules: {},
globals: {
ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
page: true,
REACT_APP_ENV: true,
},
};
stylelint
配置读取优先级, 一旦发现它们中的任何一个,将不再继续进行查找,进行解析,将使用解析后的对象。
- package.json 中的 stylelint 字段
- .stylelintrc 可以使用 JSON 或 YAML 或 JS 后缀名。默认按 JSON 解析
- stylelint.config.js
- stylelint.config.cjs
推荐配置
const fabric = require("@umijs/fabric");
module.exports = {
...fabric.stylelint,
};
如何局部禁用某条规则
.test {
// 下一行禁用禁止使用import 规则
/* stylelint-disable-next-line declaration-no-important */
color: #fff !important;
}
.test {
// 当前行禁止使用import 规则
color: #fff !important; /* stylelint-disable-line declaration-no-important */
}
// 禁用区间内所有import 规则
/* stylelint-disable selector-no-id, declaration-no-important */
.test {
color: #fff !important;
background-color: #fff !important;
}
/* stylelint-enable */
prettier
配置文件
// .prettierrc or prettier.config.js or .prettierrc.js
{
"singleQuote": true, // 使用单引号
"printWidth": 115,
"proseWrap": "always",
"semi": true, // 不加分号
"trailingComma": "none", // 结尾处不加逗号
"htmlWhitespaceSensitivity": "ignore" // 忽略'>'下落问题
}
特别注意的是, 当只使用 git hooks 就行代码格式化的时候,当提交的时候,会出现你没编辑过的文件被添加到 git 暂存区的情况。
配置文件优先级
Prettier configuration file
.editorconfig
Visual Studio Code Settings (Ignored if any other configuration is present)
配合 eslint 使用
在 ESlint 推出 --fix 参数前,ESLint 并没有自动化格式代码的功能,要对一些格式问题做批量格式化只能用 Prettier 这样的工具。并且,Prettier 在代码风格的检测上比 ESlint 更全面,所以两者通常是结合在一起使用的。
但是两者会有一些规则是相互冲突的要怎么配合起来使用呢。
1.安装依赖
$ npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
2.设置配置文件
// .eslintrc.js
{
"extends": ["plugin:prettier/recommended"]
}
// .prettierrc
{
"singleQuote": true
}
3.如果有使用到一些 ESLint 插件(如 eslint-plugin-react),需要禁掉这些插件中与 Prettier 冲突,所以需要添加 "prettier/react"。
{
"extends": [
"plugin:prettier/recommended",
"prettier/flowtype",
"prettier/react"
]
}
标签:typescript,格式化,no,代码,校验,prettier,console,true,eslint From: https://www.cnblogs.com/miangao/p/17622475.html