电商网站楼层 设计,seo快速优化排名,建设网站还不如搬砖,国内建网站流程写在前面代码规范化的重要性不在这里展开了。这一篇讲了Vue项目下如何做代码规范化的事情#xff0c;主要涉及了eslint、prettier、huskylint-staged、onchange、editorConfig这几个角色。另外#xff0c;虽然配置限于Vue项目#xff0c;但整个思路也可以作为其他项目代码规…写在前面代码规范化的重要性不在这里展开了。这一篇讲了Vue项目下如何做代码规范化的事情主要涉及了eslint、prettier、huskylint-staged、onchange、editorConfig这几个角色。另外虽然配置限于Vue项目但整个思路也可以作为其他项目代码规范的借鉴希望你是vscoder~因为接下来的配置实践都是在vscode中。如果你来自其他编辑器也提供了onchange的方法作为备用。你需要提前准备vscode插件ESLint、Vetur、EditorConfig for VS Codenode.js v8.10.0及以上方法论开始这个话题深入之前有设定了几个期许目标已有成熟规范作为主体支持自定义自定义优先级大于规范主体每个团队有自己的特别癖好配置放在项目级别不要求统一团队成员的编辑器配置后来在看了why precise commits后对具体的“发生形式”增加两个考虑维度。formate/lint auto-fix 发生形式在保存时ctrlshook比如 Pre-commit hookformate/lint auto-fix 作用对象/粒度当前编辑文件Staged files(git add 之后)的整个文件实践项目都由 Vue CLI 脚手架生成当前版本4.1.2方法一生成项目按下面步骤走你。选择Manually select features选择相关的Babel和Linter / Formatter选择 ESLint Prettier选择上 Lint on save 和 Lint and fix on commit最后一个选择配置文件是单独出来还是放在package.json选择 In dedicated config files。补补改改在工作空间添加插件配置how根目录新建vscode文件夹里面新建settings.json文件以下是settings.json内容.gitignore中 把 .vscode 给去掉why满足插件配置放在项目级别的期许目标{editor.codeActionsOnSave: {source.fixAll.eslint: true},vetur.validation.template: false
}修改.eslintrc.js配置howextends字段内容由plugin:vue/essential改为plugin:vue/recommendedwhy看eslint-plugin-vue available rules plugin:vue/essential 仅包含Base Rules和Priority A:Essentialplugin:vue/recommended 包含Base Rules、Priority A:Essential、Priority B: Strongly Recommended、Priority C: Recommended。想要有vue/attributes-order 和 vue/order-in-componentsso...module.exports {root: true,env: {node: true},extends: [plugin:vue/recommended, vue/prettier],rules: {no-console: process.env.NODE_ENV production ? error : off,no-debugger: process.env.NODE_ENV production ? error : off},parserOptions: {parser: babel-eslint}
};
增加.eslintignore忽略文件配置build/*.js
node_modules/*增加 .prettierrc.js prettier配置文件module.exports {semi: false,arrowParens: always,singleQuote: true
}
关闭生成项目内置的eslint-loaderhow? 通过 vue.config.js 关闭 vue-cli lintOnSavewhy? eslint-loader做 formate/lint auto-fix 的前提是把项目跑起来和使用eslint插件或者onchange npm包两种形式相比不具有优势且会增加编译的时间module.exports {lintOnSave: false
}
方法二生成项目按下面步骤走你依然是选择Manually select features这次不再选择Linter / Formatter依然选择 In dedicated config files补补prettier in eslint需要npm包babel-eslint、eslint、eslint-plugin-vue、prettier、eslint-config-prettier、eslint-plugin-prettier、vue-eslint-parsereslint配置文件.eslintrc.jsmodule.exports {env: {browser: true,node: true,es6: true},extends: [eslint:recommended,plugin:vue/recommended,plugin:prettier/recommended,prettier/vue],parser: vue-eslint-parser,parserOptions: {parser: babel-eslint},rules: {no-console: process.env.NODE_ENV production ? 2 : 0,no-debugger: process.env.NODE_ENV production ? 2 : 0}
};
忽略文件.eslintignorebuild/*.js
node_modules/*prettier配置文件.prettierrc.jsmodule.exports {semi: false,arrowParens: always,singleQuote: true
}
编辑器配置文件.vscode/settings.json{editor.codeActionsOnSave: {source.fixAll.eslint: true},vetur.validation.template: false
}把.vscode从.gitignore中去除hook 需要npm包husky、lint-staged 一个命令完事npx mrm lint-staged 修改下package.json中lint-staged的内容 lint-staged: {*.{js,vue}: [vue-cli-service lint,git add]}其他增加 onchange 候选方案需要提前跑一下添加eslint-watch的命令howyarn add onchange -D 安装 onchange包其次在package.json添加脚本命令eslint-watch: onchange src/**/*.{js,vue} -- eslint --fix {{changed}}why实践章加入的formate/lint auto fix的发生形式需借助vscode ESLint插件考虑到成员使用webstorm等编辑器本方案不给出其他编辑器配置仅提供onchange方案保证在其他编辑器中也有丝滑体验增加.editorConfig编辑器配置文件注意 vscode下需要 EditorConfig for VS Code插件how? 拷贝了 Vue项目的配置# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.orgroot 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小结这一套机制集成了这些功能formate/lint on save auto-fixeslint插件代理formate/lint on save auto-fixonchange备胎hookhuskylint-staged编辑器配置.editorConfig回过头来看一下最初设定的几个期许目标已有成熟规范作为主体eslint-plugin-vue prettier支持自定义自定义优先级大于规范主体在.eslintrc.js中自定义eslint配置在.prettierrc.js中自定义prettier配置配置放在项目级别配置基本都在根目录下vscode插件配置也放在了工作空间即.vscode文件夹下Done有错误/补充还请指正参考链接ESLint docvscode eslintPrettier doclint-staged readmeEditorConfig知乎-使用husky避免糟糕的git commit
