标签：no VSCode eslint Prettier defaultFormatter prettier editor true 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。