前端项目规范示例

一 选用规范

格式化工具：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'