EditorConfig 有助于为不同的 IDE 编辑器处理同一项目多个开发人员维护一致的代码风格。
以 WebStrom 为例,安装 Editorconfig 插件
此时需要在项目根目录下新建配置文件 .editorconfig
# http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
可以看到 prettier
可以翻译成 漂亮
:
Prettier
是一款强大的代码格式化工具,支持 JavaScript
、TpeScript
、CSS
、SCSS
、Less
、JSX
、Angular
、Vue
、GraphQL
、JSON
、Markdown
等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。
安装 prettier
npm install prettier -D
配置.prettierrc文件:
none
,比如对象类型的最后一个属性后面是否加一个,;{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
创建.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
安装prettier的插件
什么是冲突问题呢?比如在 prettier 中规定在代码保存的时候自动格式化代码,使得所有得单引号变为双引号,但是我们在 eslint 中规定的是,不可以是双引号。这就不符合 eslint 的规范了。
安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装)
npm install eslint-plugin-prettier eslint-config-prettier -D
添加prettier插件:
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
'plugin:prettier/recommended'
],
完成如上配置之后,当代码保存的时候,eslint 就会按照 pretter 里面的这个保存规范来进行代码风格检测了。
这个就配置了解除对声明但未被使用的变量的警告。