VScode配置prettier和eslint_mac 设置vscode 保存校验 prettierc和eslint

前端工具中如果使用prettier进行代码格式化，eslint进行错误检测。对前端工作有极大的帮助

原则：
prettier和eslint配置可以分成两种，一种是本地配置，一种是全局配置。VScode会检测文件夹根目录下有没有用户自定义的配置文件 .prettierrc.json和.eslintrc.js。如果有则会优先加载用户自定义的配置，如果没有则会加载VScode中的setting.json配置文件内的配置。

现在vscode安装prettier和eslint的插件，装使用人数最多的就行。注意的是，这个只是插件哦，在本地使用npm安装prettier和eslint

.prettierrc.json文件配置：

{
   
  "tabWidth": 2,
  "vetur.format.defaultFormatter.html": "prettier",
  "singleQuote": true,
  "semi": false
}
1
2
3
4
5
6
7

.eslintrc.js文件配置：

module.exports = {
   
    root: true,
    parserOptions: {
   
        ecmaVersion:6,
        sourceType: 'module',
        ecmaFeatures:{
   
            jsx:true,
            globalReturn:true,
            impliedStrict:false,
            experimentalObjectRestSpread: true//启用对对象的扩展
        }
    },
    env:{
   
        browser:true,
        es6:true,
        node:true,
        commonjs:true,
        jquery:true
    },
    // required to lint files
    plugins: [
        'html',
        'react',
        'promise'
    ],
    // add your custom rules here
    'rules': {
   
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        "quotes": [2, "single"],   // 单引号
        "no-console": 0,           // 不禁用console
        "no-debugger": 2,          // 禁用debugger
        "semi"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37