- 安装eslint、prettie依赖
npm install @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
// or
cnpm install @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
//or
yarn add @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
- 在根目录新建.eslintrc.js,以下配置仅供参考：
module.exports = {
root: true,
parserOptions: {
parser: "babel-eslint",
sourceType: "module",
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-unused-vars": "off",
indent: "off",
"prettier/prettier": "off",
"vue/multi-word-component-names": [
"error",
{
ignores: ["index"], //需要忽略的组件名
},
],
},
globals: {
uni: true,
},
};
- 在根根录新建. prettierrc.js,以下配置仅供参考：
//配置 prettier 。prettierrc.js
module.exports = {
// 单行最大长度
printWidth: 100,
// 设置编辑器每一个水平缩进的空格数
tabWidth: 2,
// 在句尾添加分号
semi: true,
// 使用单引号
singleQuote: false,
jsxSingleQuote: true,
// 在任何可能的多行中输入尾逗号。
trailingComma: 'all',
// 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
bracketSpacing: true,
// 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
jsxBracketSameLinte: false,
// 为单行箭头函数的参数添加圆括号。
alwaysParens: 'always',
// 行结束
endOfLine: "auto",
vueIndentScriptAndStyle: true, //是否缩进Vue 文件中的代码<script>和<style>标签
htmlWhitespaceSensitivity: 'ignore',//HTML 空白敏感度
};
到此代码检查和自动格式化已完成
- 如何忽略校验文件 在根目录添加.eslintignore文件
build/*.js
src/assets
public
dist
/node_modules
或者在package.json中设置
"eslintIgnore": [
"example.js"
]
踩坑
. prettierrc.js不生效？
重启vscode
安装prettier
.eslint-ignore不生效？
在package.json中添加eslintIgnore
