关于前端:vue2-前端项目规范整理仅做参考

阐明：

以下内容仅依据自己开发经验总结，为大家提供参考，请多指教。
那么上面就以 vue2 我的项目 前端代码 做个简略的总结，本文不波及 typeScript。

一 插件：

针对 vue2 这种构造比拟单纯的我的项目，用以下三个插件足以对代码进行最根本的格式化。

二 我的项目配置.vscode

长处: 在单个我的项目的根目录下配置.vscode 能够针对以后我的项目进行个性化配置（但次要还是要遵循开发团队根本标准）。若非必要，请勿在 vscode 全局进行代码格式化配置（自己已经深受其害 …）。

如下图所示：

setting.json 代码如下:

{
  "editor.detectIndentation": false, // vscode 默认启用了依据文件类型主动设置 tabsize 的选项
  "editor.formatOnSave": true, // 每次保留的时候主动格式化
  "editor.tabSize": 4, // 一个制表符等于的空格数。"editor.fontSize": 20, // 管制字体大小(像素)
  "markdown.preview.fontSize": 18, // 管制 Markdown 预览中应用的字号(以像素为单位)
  "terminal.integrated.fontSize": 18, // 管制终端的字号(以像素为单位)。"git.ignoreLimitWarning": true, // 疏忽“存储库中存在大量更改”的正告
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true, // 批改.vue 文件 script 中的引号为单引号
  "javascript.preferences.quoteStyle": "single", // 保留时应用单引号
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false, // 在函数括号前插入空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 定义函数参数括号前的空格解决形式
  "workbench.startupEditor": "newUntitledFile",
  "editor.lineNumbers": "on", // 管制行号的显示
  "workbench.editor.enablePreview": true, // 关上文件不笼罩
  "editor.maxTokenizationLineLength": 2000,
  "files.trimTrailingWhitespace": true, // 启用后，将在保留文件时删除行尾的空格。"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.fixAll": true
  },
  "html.format.indentHandlebars": true,
  "html.format.indentInnerHtml": true,
  "html.format.wrapAttributes": "preserve-aligned", // 对属性进行换行
  "eslint.run": "onSave", // 开启 eslint 校验
  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["typescript", "javascript", "javascriptreact", "vue"], // eslint 开启谬误提醒（红色波浪线）"prettier.trailingComma": "none", // 尽可能管制尾随逗号的输入。无效选项：'无' - 无尾随逗号 'es5' - 在 ES5 中无效的尾随逗号（对象，数组等）'all' - 尾随逗号 尽可能（函数参数）"prettier.printWidth": 120, // 指定每行代码的最佳长度，如果超出长度则换行。"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "eslint.format.enable": true,
  "[scss]": {"editor.defaultFormatter": "vscode.css-language-features"},
  "[less]": {"editor.defaultFormatter": "vscode.css-language-features"},
  "[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "": {"editor.defaultFormatter":"vscode.html-language-features"},"": {"editor.defaultFormatter": "vscode.typescript-language-features"}
}

通过上述配置当前，在咱们保留代码时，那么代码就能够依照咱们配置好的规定进行格式化，大大提高代码的可维护性。