Vue项目配置Eslint Prettier,拯救强迫症

对于强迫症来说,Eslint是一个非常强大的工具,可以自定义代码排版规则,在保存的时候自动调整代码,以符合规范。每次保存后看到整理好的代码,比运行成功还高兴。

在团队合作中也是必不可少的,一百人写一百种格式的代码,阅读代码本来就需要精神高度集中,而每次看到时而单引号、时而双引号的代码就会觉得很烦躁。人都天生喜欢整齐划一的秩序,所以建立无论是个人项目还是团队合作,都强烈建议使用Eslint。

在这次重构博客(Nothlu.com)的过程中,我使用了Eslint Prettier进行规范管理,但在整个过程中发现设置并没有这么智能,在创建Vue的过程中选择Eslint Prettier,之后没有进行任何设置的话,那么你的代码保存的时候大概率是不符合规范的,几乎每行都能给你报错。

在网上搜索一圈后发现,很多人把这个问题复杂化了,有的甚至还要安装额外的插件。其实很简单,首先配置VsCode文件,开启支持保存改动,然后规定一些简单的Prettier的规范。

1、修改VsCode文件

点击文件-首选项-设置,在搜索框里输入Json即可看到修改配置:

然后输入以下配置:

{
  "prettier.requireConfig": true,
  "editor.formatOnSave": true
}

2、配置Prettierrc文件

在Vue的根目录下创建 ".prettierrc.js"文件,然后输入以下规范:

module.exports = {
	semi: false, // 行位是否使用分号,默认为true
	trailingComma: 'es5', // 是否使用尾逗号,有三个可选值"<none|es5|all>"
	singleQuote: true, // 字符串是否使用单引号,默认为false,使用双引号
	printWidth: 100, // 一行的字符数,如果超过会进行换行,默认为80
	tabWidth: 4, // 一个tab代表几个空格数
	useTabs: true, // 启用tab缩进
	bracketSpacing: true, // 对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
}

现在保存后自动调整代码已经启用,不用再担心自己的强迫症了!

编辑于 04-14

文章被以下专栏收录