项目在多人合作时，代码格式化时不统一是个大问题。建议大家的编辑器配置统一，开启eslint，让代码看起来风格统一。
1. vscode编辑器安装插件
- Prettier - Code formatter
- ESlint
2. 根目录创建.vscode文件，内容如下
// .vscode/settings.json
// 该文件会覆盖vscode编辑器中的settings.json,该文件没有的配置会使用vscode编辑器中的配置
{
"eslint.enable": true,
"eslint.options": {
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
"vetur.format.defaultFormatter.html": "prettier"
}
3. 安装依赖包
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.0.3",
4. 根目录下创建.editorconfig文件，内容如下
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
5. 根目录下创建.eslintignore，内容如下
build/*.js
src/assets
public
dist
6. 根目录下创建eslintrc.js ，内容如下
{
"name": "etb_home",
"version": "1.0.0",
"description": "招采e贷数据可视化系统",
"author": "Pan <panfree23@gmail.com>",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"build:dev": "vue-cli-service build --mode development",
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --fix --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
"dependencies": {
"@antv/layout": "^0.3.13",
"@antv/x6": "^2.1.4",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/polyfill": "^7.12.1",
"@riophae/vue-treeselect": "^0.4.0",
"@tinymce/tinymce-vue": "^3.0.1",
"@vue/cli-plugin-babel": "4.4.4",
"ans-ui": "1.1.9",
"babel-polyfill": "^6.26.0",
"bpmn-js": "^8.8.2",
"clipboard": "^2.0.11",
"codemirror": "^6.0.1",
"core-js": "3.6.5",
"d3": "^7.8.1",
"dayjs": "^1.11.7",
"echarts": "^5.3.3",
"echarts-stat": "^1.2.0",
"element-ui": "^2.15.6",
"file-saver": "^2.0.5",
"js-cookie": "2.2.0",
"jsencrypt": "^3.2.1",
"lodash": "^4.17.21",
"lottie-web": "^5.7.12",
"moment": "^2.29.4",
"moment-timezone": "^0.5.40",
"normalize.css": "^8.0.1",
"nprogress": "0.2.0",
"ramda": "^0.28.0",
"tinymce": "^5.10.7",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-codemirror": "^6.1.1",
"vue-loader": "^15.9.2",
"vue-router": "3.0.6",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"vuex-persistedstate": "^3.2.1",
"vxe-table": "^3.6.9",
"xe-utils": "^3.5.7"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-service": "4.4.4",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "9.5.1",
"axios": "^0.27.2",
"babel-eslint": "10.1.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
"sass": "1.26.8",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "^0.7.2",
"svg-sprite-loader": "4.1.3",
"vue": "^2.6.14",
"vue-style-loader": "^4.1.1",
"vue-template-compiler": "2.6.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"license": "MIT"
}
7.根目录下创建.prettierrc.js文件，内容如下
module.exports = {
// 最大长度80个字符
printWidth: 300,
// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
singleQuote: true,
// 行末分号, 默认true
semi: false,
// JSX双引号
jsxSingleQuote: false,
// 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
trailingComma: 'none',
// 在对象文字中打印括号之间的空格。 默认true
bracketSpacing: true,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
arrowParens: 'avoid',
// 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
insertPragma: false,
// 行尾换行格式
endOfLine: 'auto',
// html空格敏感度
htmlWhitespaceSensitivity: 'ignore',
// tab缩进大小,默认为2
tabWidth: 2,
// 使用tab缩进还是空格，默认false
useTabs: true,
// vue缩进脚本和样式
vueIndentScriptAndStyle: false,
// > 标签放在最后一行的末尾，而不是单独放在下一行 默认false
jsxBracketSameLine: false,
}
