VSCode+Prettier+Eslint团队代码风格统一，保存自动根据Eslint格式化
作者：互联网
VSCode+Prettier+Eslint团队代码风格统一，保存自动根据Eslint格式化
团队协作代码风格保持一致-----Prettier
代码格式校验保持一致----Eslint
代码规范除了编辑器检查以外，还有一些譬如变量名、样式名的规范，可以参考腾讯的代码规范或者百度的代码规范
1、先行安装如下四个插件插件
2、VScode编辑器设置
settings.json
{
//主题和图标配置，根据自己情况配置
"workbench.iconTheme": "simple-icons",
"workbench.colorTheme": "Monokai Dimmed",
//忽略搜索的文件夹
"search.exclude": {
"**/bower_components": true,
"**/node_modules": false
},
//忽略工程打开的文件夹
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/iOS": true
},
// 头部注释 ctrl+alt+i
"fileheader.customMade": {
"Description": "",
"Autor": "Godfery",
"Date": "Do not edit"
},
// 函数注释 ctrl+alt+t
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": "",
"author": "Godfery"
},
"fileheader.configObj": {
"autoAdd": true,
"autoAlready": true,
"prohibitAutoAdd": ["json", "md"],
"wideSame": false,
"wideNum": 13
},
// editor部分-------------
"editor.formatOnSave": true, // 保存自动格式化
"editor.wordWrapColumn": 200,
"editor.codeActionsOnSave": {
// eslint 保存时自动修复 【可修复function关键字后不带空格】
"source.fixAll.eslint": true
},
// eslint代码语法校验部分
"eslint.alwaysShowStatus": true,
"eslint.quiet": true,
"eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
//对不同文件进行不同的格式化选择
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// vetur 默认使用prettier格式化
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 结尾无分号
"printWidth": 200, // 超过200个字符换行
"singleQuote": true, // 使用单引号
"trailingComma": "none", // 无尾随逗号
"arrowParens": "avoid" // 箭头函数单个参数不加分号
},
"prettyhtml": {
"printWidth": 200
}
},
// prettier代码风格格式化部分
"prettier.semi": false,
"prettier.printWidth": 200,
"prettier.trailingComma": "none",
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"prettier.tabWidth": 4,
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
}
}
项目目录结构
.eslintrc.js 设置
/*
* @Description:eslint 规则配置
* @Autor: Godfery
* @Date: 2021-07-12 17:04:51
*/
// ESlint 检查配置
module.exports = {
root: true,
parserOptions: {
parser: "babel-eslint",
sourceType: "module"
},
env: {
browser: true,
node: true,
es6: true
},
extends: ["eslint:recommended", "plugin:vue/essential"],
// add your custom rules here
// it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"new-parens": 2,
"no-array-constructor": 2,
"no-caller": 2,
"no-console": "off",
"no-class-assign": 2,
"no-cond-assign": 2,
"no-const-assign": 2,
"no-control-regex": 0,
"no-delete-var": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-empty-character-class": 2,
"no-empty-pattern": 2,
"no-eval": 2,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": [2, "functions"],
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-lone-blocks": 2,
"no-mixed-spaces-and-tabs": 2,
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-new-object": 2,
"no-new-require": 2,
"no-new-symbol": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-return-assign": [2, "except-parens"],
"no-self-assign": 2,
"no-self-compare": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-this-before-super": 2,
"no-throw-literal": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-unexpected-multiline": 2,
"no-unmodified-loop-condition": 2,
"no-unreachable": 2,
"no-unsafe-finally": 2,
"no-useless-call": 2,
"no-useless-computed-key": 2,
"no-useless-constructor": 2,
"no-useless-escape": 0,
"no-whitespace-before-property": 2,
"no-with": 2,
"padded-blocks": [2, "never"],
"space-before-blocks": [2, "always"],
"space-in-parens": [2, "never"],
"space-infix-ops": 2,
"template-curly-spacing": [2, "never"],
"use-isnan": 2,
"valid-typeof": 2,
"wrap-iife": [2, "any"],
"yield-star-spacing": [2, "both"],
"no-debugger": process.env.NODE_ENV === "production" ? 2 : 2
}
};
.eslintignore 忽略eslint检查设置
# 忽略build目录下类型为js的文件的语法检查
build/*.js
# 忽略src/assets目录下文件的语法检查
src/assets
# 忽略public目录下文件的语法检查
public
.editorconfig 编辑器配置
root = true
# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选space、tab
indent_style = space
# 缩进的空格数
indent_size = 4
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 匹配md结尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
标签：no,VSCode,eslint,Prettier,defaultFormatter,prettier,editor,true,Eslint 来源： https://blog.csdn.net/qq_42514643/article/details/118685742