介绍
小编给大家分享一下在vue项目中使用eslint +漂亮格式化代码的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
对于eslint大家应该比较了解了,是用来校验代码规范的。给大家介绍下更漂亮,漂亮是用来统一代码风格,格式化代码的,支持js, ts, css,少,scss, json, jsx。并且集成了vscode, vim, webstorm,崇高文本插件。
如果你的项目中采用的是ellint默认规则并且没有添加别的规则,没有使用标准或airbnb得风格,你可以下载编辑器插件直接保存代码时自动格式化。
以vscode为例:搜索插件,Eslint、vuter prettier-code安装,在编辑器首选项,,配置中修改配置
,,//由于不漂亮能格式化vue文件template ,所以使用js-beautify-html格式化
“vetur.format.defaultFormatter.html"才能:,“js-beautify-html",,
“vetur.format.defaultFormatterOptions"才能:,{
,,,“js-beautify-html":, {
,,,,,“wrap_attributes":,“force-aligned",//属性强制折行对齐
,,,}
,,},
“才能eslint.autoFixOnSave",,真的,,//保存时使用自动格式化
“eslint.validate"才能:,[//才能验证文件类型
,,,“javascript",
,,,“javascriptreact",
,,,“vue",
,,,“html",
,,,“jsx",
,,,{
,,,,,“language":,“html"
,,,,,“autoFix":真实
,,,},
,,,{
,,,,,“language":,“vue"
,,,,,“autoFix":真实
,,,}
,,,
“才能prettier.singleQuote",,真的,,//使用单引号而不是双引号
“才能prettier.jsxBracketSameLine",,真的,,//将在多行JSX元素放在最后一行的末尾,而不是单独放在下一行
“才能editor.formatOnSave",,真的,,//保存时自动格式化 然后在eslint配置文件.eslintrc延伸添加eslint:推荐
扩展:,(
,,,& # 39;插件:vue/重要# 39;
,,,& # 39;eslint:推荐# 39;
,,, 在页面。json文件脚本中棉絮里面添加——fix ,当执行npm运行线头时eslint会帮你修复一些可以自动修复得规则
“scripts":, {
,,,“dev":,“webpack-dev-server ——inline ——progress ——config 构建/webpack.dev.conf.js"
,,,“时:,“npm run dev"
,,,“lint":,“eslint ——fix ——ext . js, .vue src"
,,,“build":,“node 构建/build.js"
,,}, 现在我们就写完代码保存时更漂亮就会帮我们格式化代码,执行npm运行线头时eslint会修复一些可以修复的规则,其余得规则就需要我们手动修复了
如果你的项目中使用的是标准或airbnd的代码规范,或项目中自己添加了一些eslint样式规则,那么我们需要安装一些依赖在项目中帮助格式化代码
npm 小姐:——save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli 安装eslint-plugin-prettier 配合eslint使用更漂亮,安装eslint-config-prettier禁用一些eslint和漂亮的冲突的规则,安装prettier-eslint-cli使我们可以敲命令格式化代码
在.eslintrc.js 插件和扩展中添加漂亮的支持,规则中添加规则
,延伸:,
,,,& # 39;插件:vue/重要# 39;
,,,& # 39;eslint:推荐# 39;
,,,& # 39;插件:漂亮/推荐# 39;
,,,//才能,required 用lint * .vue 文件
插件才能:[& # 39;vue # 39;,, & # 39;漂亮# 39;],//才能,add your custom rules 这里
,,规则:{
,,,& # 39;漂亮/漂亮# 39;:,& # 39;错误# 39;
,,,//,allow debugger during 发展
,,,& # 39;no-debugger& # 39;:, process.env.NODE_ENV ===, & # 39;生产# 39;,?,& # 39;错误# 39;,:,& # 39;从# 39;
以前,,} 在page.json 脚本中添加配置,,执行npm运行格式就可以格式化代码了
“scripts":, {
,,,“dev":,“webpack-dev-server ——inline ——progress ——config 构建/webpack.dev.conf.js"
,,,“时:,“npm run dev"
,,,“lint":,“eslint ——fix ——ext . js, .vue src"
,,,“build":,“node 构建/build.js"
,,,“format":,“prettier-eslint ——write \“src/* */* . js \“, \“src/* */* .vue \““
,,}, 当我们执行npm格式运行时还会报各种奇怪的错误如:错误:删除?(漂亮/漂亮)在src/页面/xxx等;这是因为漂亮配置和编辑器漂亮配置冲突导致的,,null
null
null
null
null
null
null
null
null
null
null
null
