前端项目规范示例

一 选用规范

格式化工具：prettier

语法检查工具： eslint + stylelint

git 提交规范：commitlint + husky

二 在package.jsonz中添加依赖

    "lint-staged": "^11.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "husky": "^4.0.0-beta.5",
    "@commitlint/cli": "^12.1.4",
    "@commitlint/config-conventional": "^12.1.4"

"scripts": {
    "serve": "vue-cli-service serve --mode staging",
    "build:dev": "vue-cli-service build --mode staging",
    "build:pro": "vue-cli-service build --mode produc",
    "lint": "vue-cli-service lint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/prompt"
    }
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix"
    ],
    "src/**/*.vue": [
      "eslint --fix"
    ],
    "src/**/*.css": [
      "stylelint --fix"
    ]
  },

三 安装依赖

执行命令：npm i

四 添加配置文件

setting.JSON

{
    "window.zoomLevel": 0,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[stylus]": {
        "editor.defaultFormatter": "thisismanta.stylus-supremacy"
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.definitionLinkOpensInPeek": true,
    "editor.wordWrapColumn": 200,
    "editor.autoIndent": "keep",
    "editor.tabCompletion": "on",
    "editor.insertSpaces": false,
    "diffEditor.ignoreTrimWhitespace": false,
    /*  prettier的配置 */
    "prettier.printWidth": 80, // 超过最大值换行
    "prettier.tabWidth": 2, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.trailingComma": "all", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "terminal.integrated.allowMnemonics": true,
    "terminal.integrated.automationShell.linux": "",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.format.options.tabSize": 2,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-expand-multiline"
        },
        "prettyhtml": {
            "printWidth": 200,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    // 格式化stylus, 需安装Manta'