代码格式化遵照公司的规范(代码格式化)
js代码格式化
- 安装vscode插件:Prettier - Code formatter
- 格式化配置:将下列配置写入到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文件格式化
- 安装vetur插件
- 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属性的引号
},