VSCode+Prettier+Eslint团队代码风格统一，保存自动根据Eslint格式化

本文主要是介绍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

这篇关于VSCode+Prettier+Eslint团队代码风格统一，保存自动根据Eslint格式化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！