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

{

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 = {

…

}

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

{

“jsxSingleQuote”: true,

“printWidth”: 120,

“tabWidth”: 2,

“semi”: true,

“singleQuote”: true,

“trailingComma”: “none”,

“jsxBracketSameLine”: true

}

3. 配置 Pre-commit Hook git 提交前格式化和检查代码

3.1 运行 npm i -D lint-staged husky

4. 修改package.json

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{

“scripts”: {

“lint”: “eslint --ext .js src”,

“lint:fix”: “eslint --fix --ext .js src”,

“lint-staged”: “lint-staged”,

“lint-staged:js”: “eslint --ext .js src”,

“format”: “prettier --write ./src///**/*.js”

},

“lint-staged”: {

“**/*.js”: [

“prettier --write”,

“git add”

],

“**/*.js”: “npm run lint-staged:js”

}

}

使用编辑器插件

---

vscode

在用户设置setting.json中添加

{

“prettier.eslintIntegration”: true,

“editor.formatOnSave”: true, // 保存自动格式化

“eslint.autoFixOnSave”: true // 保存自动检查代码

}

配置完成以后，由于新下载的eslint插件与create-react-app脚手架自带的eslinit可能会存在版本上的差异，当运行项目的时候，或许会产生如下的错误：

出现这个错误以后的解决方式是：

1、在node_modules依赖包当中找到eslinit这个文件夹删除；

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总