在create-react-app项目下，使用eslinit和prettier美化代码(1)

ESlint 不是自带格式化吗？为什么还要用 Prettier。

A: ESlint的重心在代码质量，Prettier只关心代码格式。

Q: Editorconfig 又起了什么作用？

A: EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。

介绍

–

Prettier 一个简洁的代码格式化工具

eslint-config-prettier 使用 eslint 兼容 Prettier 的规则

lint-staged 和 husky git 的 hook 钩子工具

安装

–

1. 安装 eslint 相关

1.1 运行 npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react

1.2  新建 .eslintrc.js

module.exports = {

env: {

browser: true,

es6: true,

node: true

},

extends: [‘airbnb’, ‘prettier’],

parser: ‘babel-eslint’,

parserOptions: {

ecmaFeatures: {

jsx: true

}

},

plugins: [‘react’],

rules: {

‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’,

‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’,

‘react/prefer-stateless-function’: 0, // 关闭react默认的props-type验证

‘react/prop-types’: [0],

‘react/jsx-closing-bracket-location’: ‘off’,

‘consistent-return’: ‘off’,

// 关闭使用解构赋值的检测

‘react/destructuring-assignment’: [0, ‘always’],

// 解决require报错问题

‘import/no-extraneous-dependencies’: [‘error’, { devDependencies: true }],

‘react/jsx-wrap-multilines’: ‘off’,

‘global-require’: 0,

‘jsx-a11y/no-static-element-interactions’: 0,

‘jsx-a11y/click-events-have-key-events’: 0

}

};

注：如果使用.eslintrc.js进行配置的话，要把配置的代码写在

module.exports = {

…

}

当中，如上面的配置。如果采用.eslintrc文件进行配置，则需要写成JSON格式：

{

env: {

browser: true,

es6: true,

node: true

},

extends: [‘airbnb’, ‘prettier’],

parser: ‘babel-eslint’,

parserOptions: {

ecmaFeatures: {

jsx: true

}

},

plugins: [‘react’],

rules: {

‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’,

‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’,

}

}

2. 安装 prettier 相关

2.1 运行 npm i -D prettier eslint-config-prettier

2.2 新建 .prettierrc.js

module.exports = {

// 使能每一种语言默认格式化规则

‘[html]’: {

‘editor.defaultFormatter’: ‘esbenp.prettier-vscode’

},

‘[css]’: {

‘editor.defaultFormatter’: ‘esbenp.prettier-vscode’

},

‘[less]’: {

‘editor.defaultFormatter’: ‘esbenp.prettier-vscode’

},

‘[javascript]’: {

‘editor.defaultFormatter’: ‘esbenp.prettier-vscode’

},

printWidth: 120,

trailingComma: ‘none’,

jsxBracketSameLine: true,

/* prettier的配置 */

printWidth: 100, // 超过最大值换行

tabWidth: 2, // 缩进字节数

useTabs: false, // 缩进不使用tab，使用空格

semi: true, // 句尾添加分号

singleQuote: true, // 使用单引号代替双引号

proseWrap: ‘preserve’, // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行

arrowParens: ‘avoid’, // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号

bracketSpacing: true, // 在对象，数组括号与文字之间加空格 “{ foo: bar }”

//‘prettier.disableLanguages’: [‘vue’], // 不格式化vue文件，vue文件的格式化单独设置

endOfLine: ‘auto’, // 结尾是 \n \r \n\r auto

// eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验

‘prettier.htmlWhitespaceSensitivity’: ‘ignore’,

‘prettier.ignorePath’: ‘.prettierignore’, // 不使用prettier格式化的文件填写在项目的.prettierignore文件中

jsxBracketSameLine: false, // 在jsx中把’>’ 是否单独放一行

jsxSingleQuote: false // 在jsx中使用单引号代替双引号

//parser: ‘babylon’, // 格式化的解析器，默认是babylon

//requireConfig: false, // Require a ‘prettierconfig’ to format prettier

//stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验

//trailingComma: ‘es5’, // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）

//tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验

};

注：如果使用.eslintrc.js进行配置的话，要把配置的代码写在

module.exports = {

…

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。