vscode+eslint+prettier 对代码进行检错及格

2020-06-16 本文已影响0人踩坑怪At芬达

在项目下安装必要插件

//无论使用yarn还是npm，需要全局安装eslint
npm install eslint -g 全局安装
//如果你使用Npm
npm install  eslint babel-eslint eslint-plugin-react eslint-config-alloy -D
//如果你使用yarn
yarn add     eslint babel-eslint eslint-plugin-react eslint-config-alloy -D

在项目目录下创建配置文件 - .eslintrc.js

//.eslintrc.js
module.exports = {
    extends: [//使用哪些默认规则来检查,由于我们安装了 eslint-config-alloy 所以直接使用它的规则
        'alloy',
        'alloy/react',
    ],
    env: {
      browser: true,
      commonjs: true,
      es6: true
    },
    globals: {
      '$':true,//这里可以将一些全局变量忽略检查,如果你没有则可以不用配置
    },
    rules: {
      // 自定义你的规则,https://eslint.bootcss.com/docs/rules/ 可以查找规则
     'no-debugger':1,//比如发现debugger时只是警告，不要报错
     'indent': [1, 2], // 控制一个tab缩进为2个空格
     'quotes': [1, 'single'], // 要求字符串使用单引号包裹
      
    }
};

配置vscode
1、首先需要在vscode内自己把eslint的插件安装好
2、在vscode的setting.json中增加配置

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",//增加了对react的支持
    ],
    // 开启保存时自动根据规则会修复一些问题，比如刚才我们配置了缩进和单引号包裹字符串，那么这个时候会自动格式化这些问题
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

排除某些文件夹或者文件不实用eslint检测
1、在需要不检测的文件头部增加 /* eslint-disable */ 注释
2、创建.eslintignore 文件，配置需要忽略的文件
```
//.eslintignore 加入要过滤的文件夹和文件
node_modules
webpack.config.js
```

加入prettier来帮我们格式化代码

1、首先vscode内安装好prettier插件
2、在项目根目录下增加配置文件 prettier.config.js

module.exports={
  //简单配置几个常用的格式化方案
  tabWidth: 2,//1个tab用2个空格代替
  useTabs: false,
  printWidth: 120,
  semi:true,//末尾必须有分号
  singleQuote:true,//使用单引号包裹字符串
  jsxSingleQuote:true //jsx内也使用单引号包裹字符串
  //其他规则可以在https://prettier.io/docs/en/options.html查询
};

然后在vscode的setting.json内增加配置

{
    "editor.formatOnSave": true,//当保存的时候，自动格式化
    //指定react和js都使用prettier来作为格式化工具
     "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

好了接下来试试在编辑代码后按保存看看
如果不想自动格式化代码，可以将 "editor.formatOnSave": false 然后通过鼠标右键点击格式化命令来随时格式化

vscode+eslint+prettier 对代码进行检错及格

加入prettier来帮我们格式化代码

猜你喜欢

热点阅读