文档章节

遵照公司代码规范,配置vscode

T
 TreeZhou0511
发布于 06/27 19:29
字数 419
阅读 10
收藏 0

代码格式化遵照公司的规范(代码格式化

js代码格式化

  1. 安装vscode插件:Prettier - Code formatter
  2. 格式化配置:将下列配置写入到vscode的settings.json文件
  "prettier.disableLanguages": ["vue"],
  "prettier.eslintIntegration": false,
  "prettier.tslintIntegration": false,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.semi": true, //分号
  "prettier.singleQuote": true, //单引号
  "prettier.jsxSingleQuote": false,//jsx属性的引号
  "prettier.trailingComma": "none", //对象数组最后一项是否要尾部逗号
  "prettier.bracketSpacing": true, //对象花括号空格
  "prettier.jsxBracketSameLine": false,
  "prettier.arrowParens": "avoid", //箭头函数参数括号

vue文件格式化

  1. 安装vetur插件
  2. vetur配置:将下列配置写入到vscode的settings.json文件
"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      //"prettier" 规则文档https://prettier.io/docs/en/options.html
      "printWidth": 80, //行长
      "tabWidth": 2,
      "semi": true, //分号,默认为true
      "singleQuote": true, //单引号,
      "jsxSingleQuote": false, //
      "trailingComma": "none", //逗号
      "bracketSpacing": true, //Print spaces between brackets in object literals.
      "jsxBracketSameLine": false,
      "arrowParens": "avoid"
    },

    "js-beautify-html": {
      //"js-beautify-html" 规则文档https://github.com/beautify-web/js-beautify
      "indent_size": 2,
      "indent_char": " ",
      "indent_with_tabs": false,
      "editorconfig": false,
      "eol": "\n",
      "end_with_newline": false,
      "indent_level": 0,
      "preserve_newlines": true,
      "max_preserve_newlines": 1,
      "space_in_paren": false,
      "space_in_empty_paren": false,
      "jslint_happy": false,
      "space_after_anon_function": false,
      "space_after_named_function": false,
      "brace_style": "collapse",
      "unindent_chained_methods": false,
      "break_chained_methods": false,
      "keep_array_indentation": false,
      "unescape_strings": false,
      "e4x": false,
      "comma_first": false,
      "operator_position": "before-newline",
      "unformatted": [], // Tags that shouldn't be formatted. Causes mis-alignment
      "wrap_line_length": 0, // Lines should wrap at next opportunity after this number of characters (0 disables)
      "wrap_attributes": "force-expand-multiline"
      // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
    }
  },


与上述代码规范一致的eslint规则

rules: {
    quotes: ['error', 'single'], //单引号
    semi: ['error', 'always'], //分号
    'comma-dangle': ['error', 'never'], //对象数组最后一项是否要尾部逗号
    'arrow-parens': ['error', 'as-needed'], //箭头函数参数括号
    'object-curly-spacing': ['error', 'always'], //对象花括号空格
    'jsx-quotes': ['error', 'prefer-double'], //jsx属性的引号
  },

© 著作权归作者所有

T

TreeZhou0511

粉丝 0
博文 10
码字总数 8255
作品 0
广州
私信 提问
在Typescript项目中,如何优雅的使用ESLint和Prettier

  对于Typescript项目的编码规范而言,主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码,通过配置解析器,也能规范TS代码。此外由于性能问题,TypeScript 官方决定全面采用ESLint,...

yuxiaoliang
07/04
0
0
一步一步,统一项目中的编码规范(vue, vscode, vetur, prettier, eslint)

团队开发中,多人开发同一个项目,由于个人编码习惯不同,一个项目中最终的代码风格可能差别很大,所以需要通过工具进行约束来保证代码风格的统一。同时也希望通过工具尽可能的减少低级错误出...

wfz
04/25
0
0
一把梭系列 之 颜值不够VsCode来凑

  如果您的孩子不适应编译型语言怎么办?     如果您的孩子贪玩不想花多时间在编程上怎么办?       如果您还没有孩子怎么办?         如果您夜晚兼职觉不够睡又怎么办...

NMS.LanX
04/05
0
0
VS Code书写vue项目配置 eslint+prettier 统一代码风格

前言 以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力工具是sublime,ws辅助,vscode基本很少使用(就下载安装放在冷宫),...

游魂Andy
2018/11/09
0
0
推荐一款 phpcs 插件规范 Laravel 代码 (规范从本地写代码到版本控制)

我相信每个公司都有一套完备的代码规范标准,但标准是标准,如何能有效的让所有人遵守,那就要工具的辅助和实时提醒了。 如前端 vue 的大家基本都会使用 eslint 来约束我们的代码,一旦多一个...

异步社区
2018/06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bootstrap(三)文本排版

排版前的基础 必须是HTML5文档类型 <!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body></body></html> 移动设备优先(viewport的设置) <meta name="viewport"......

ZeroBit
13分钟前
0
0
编写高质量代码:改善Java程序的151个建议(第3章:类、对象及方法___建议41~46)

建议41:让多继承成为现实 在Java中一个类可以多重实现,但不能多重继承,也就是说一个类能够同时实现多个接口,但不能同时继承多个类。 Java中提供的内部类可以曲折的解决此问题。 建议42:...

青衣霓裳
14分钟前
0
0
实例解说AngularJS在自动化测试中的应用

7月25日晚8点,线上直播,【AI中台——智能聊天机器人平台】,点击了解详情。 一、什么是AngularJS ? 1、AngularJS是一组用来开发web页面的框架、模板以及数据绑定和丰富UI的组件; 2、Angul...

宜信技术学院
18分钟前
2
0
网站安全防护加固discuz漏洞修复方案

近期我们SINE安全在对discuz x3.4进行全面的网站渗透测试的时候,发现discuz多国语言版存在远程代码执行漏洞,该漏洞可导致论坛被直接上传webshell,直接远程获取管理员权限,linux服务器可以...

网站安全
19分钟前
0
0
彻底弄懂UTF-8、Unicode、宽字符、locale

结论 宽字符类型wchar_t locale 为什么需要宽字符类型 多字节字符串和宽字符串相互转换 最近使用到了wchar_t类型,所以准备详细探究下,没想到水还挺深,网上的资料大多都是复制粘贴,只有个...

linux服务器架构
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部