JavaScript代码风格-CFANZ编程社区

JavaScript代码风格

基于eslint的代码规则，具体规则详见eslint-config-airbnb源码

配置方法：

安装eslint-loader

`npm install --save-dev eslint-loader`

安装eslint

`npm install --save-dev eslint`

webpack.config.js下添加代码

`{ test: /\.jsx?$/, loader: 'eslint-loader', enforce: "pre", include: [path.resolve(__dirname, 'src')], // 指定检查的目录 options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范 } }`

{
test: /\.jsx?$/,
loader: 'eslint-loader',
enforce: "pre",
include: [path.resolve(__dirname, 'src')], // 指定检查的目录
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
}
}

第四步：新建配置文件.eslintrc.js

`module.exports = { "parser": "babel-eslint", "extends": "airbnb", "rules": { "import/no-extraneous-dependencies": "off", "import/no-unresolved": "off", }, globals: { APP_TYPE: true, }, "env": { "browser": true, "node": true, }, };`

module.exports = {
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"import/no-extraneous-dependencies": "off",
"import/no-unresolved": "off",
},
globals: {
APP_TYPE: true,
},
"env": {
"browser": true,
"node": true,
},
};

第五步：在package.json中添加

`"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "lint": "eslint --ext .js,.jsx src",//添加此行 "precommit": "lint-staged" },`

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"lint": "eslint --ext .js,.jsx src",//添加此行
"precommit": "lint-staged"
},

第六步：配置Airbnb校验规则及其依赖

`npm install eslint-plugin-jsx-a11y --save npm install eslint-plugin-react --save npm install eslint-plugin-import --save npm install --save-dev eslint-config-airbnb`

第七步：在配置文件.eslintrc.js中添加

`extends: 'airbnb',`

0 条评论