Eslint & Perttier 的使用主要依赖以下插件:
- Prettier,代码格式化工具。
- eslint:recommended ,eslint 中包含的推荐规则。
- eslint-plugin-prettier,eslint 中使用 prettier 进行检查。
- eslint-config-prettier,用于解决 eslint 与 prettier 的规则冲突。
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier prettier
创建.eslintrc.js
// .eslintrc.js
module.exports = {
root: true,
env: {
es6: true,
node: true
},
extends: ["eslint:recommended", "plugin:prettier/recommended"],
rules: {
"no-unused-vars": ["error", { "vars": "all", "args": "none" }],
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
},
parserOptions: {
"ecmaVersion": 8
}
};
创建 .eslintignore
// .eslintignore
node_modules/*
plublic/*
修改package.json
// package.json
{
"scripts": {
"lint": "eslint '**/*.js' --fix"
},
}
原本vscode setting.json
{
"editor.quickSuggestions": {
"strings": true
},
"workbench.sideBar.location": "left",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.html": "html"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.tabSize": 2,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"liveSassCompile.settings.formats":[
// 扩展
{
"format": "compact",//可定制的出口CSS样式(expanded,compact,compressed,nested)
"extensionName": ".min.css",//编译后缀名
"savePath": null//编译保存的路径
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"commentTranslate.targetLanguage": "zh-CN",
"tabnine.experimentalAutoImports": true,
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
"editor.formatOnType": true,
"editor.formatOnSave": true
},
"editor.inlineSuggest.enabled": true,
"github.copilot.enable": {
"*": true,
"yaml": false,
"plaintext": true,
"markdown": false
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"bracket-pair-colorizer-2.depreciation-notice": false,
"workbench.editor.splitInGroupLayout": "vertical",
"window.zoomLevel": 1,
"editor.formatOnSave": true,
//上面是原来配置
"editor.defaultFormatter": "esbenp.prettier-vscode", //自动格式化程序为prettier
"javascript.updateImportsOnFileMove.enabled": "always", //js重命名文件自动更新路径
//js自动格式化程序为prettier-eslint
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "prettier-eslint",//主要是这一行解决冲突
"vetur.format.defaultFormatterOptions": {
// #vue组件中html代码格式化样式
// "js-beautify-html": {},
// "prettier-eslint": {},
// "prettyhtml": {}
},
"editor.suggestSelection": "first", //tab优先选第一个建议
"editor.formatOnPaste": true, //自动格式化粘贴内容
"editor.formatOnType": true, //键入一行后自动格式化
}
vscode 安装 prettier-eslint
再在 代码中,右键,使用。。。格式化,用perttier-eslint
{
"editor.quickSuggestions": {
"strings": true
},
"workbench.sideBar.location": "left",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.html": "html"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.tabSize": 2,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"liveSassCompile.settings.formats":[
// 扩展
{
"format": "compact",//可定制的出口CSS样式(expanded,compact,compressed,nested)
"extensionName": ".min.css",//编译后缀名
"savePath": null//编译保存的路径
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"commentTranslate.targetLanguage": "zh-CN",
"tabnine.experimentalAutoImports": true,
"editor.inlineSuggest.enabled": true,
"github.copilot.enable": {
"*": true,
"yaml": false,
"plaintext": true,
"markdown": false
},
"bracket-pair-colorizer-2.depreciation-notice": false,
"workbench.editor.splitInGroupLayout": "vertical",
"window.zoomLevel": 1,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode", //自动格式化程序为prettier
"javascript.updateImportsOnFileMove.enabled": "always", //js重命名文件自动更新路径
//js自动格式化程序为prettier-eslint
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "prettier-eslint",//主要是这一行解决冲突
"vetur.format.defaultFormatterOptions": {
// #vue组件中html代码格式化样式
// "js-beautify-html": {},
// "prettier-eslint": {},
// "prettyhtml": {}
},
"editor.suggestSelection": "first", //tab优先选第一个建议
"editor.formatOnPaste": true, //自动格式化粘贴内容
"editor.formatOnType": true, //键入一行后自动格式化
}