代码规范之eslint+prettier初探索

eslint配置

eslint文档：查看文档
1.eslint配置
下面是在vue-cli3.x项目中配置的一个简单demo文件.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  plugins: ["vue", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  }
};

2.上面代码中的rules可以参考文档自由配置，常用的有如下

rules: {
    'array-callback-return': 1, //return 后面是否允许省略
    "arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
    'consistent-return': 0, //要求 return 语句要么总是指定返回的值，要么不指定
    'camelcase': 0, //强制驼峰法命名
    'eqeqeq': 0, //强制全等( === 和 !==)
    'func-names': 0, //函数表达式必须有名字
    "global-require": 0, // 取消对require的验证，使得可以使用require来加载图片的相对路径
    "import/no-unresolved": 0, // 取消自动解析路径，以此开启alias的别名路径设置
    'import/extensions': 0, // 取消对文件扩展名的验证
    'indent': 'off', //缩进风格(强制使用一致的缩进)
    "linebreak-style": 0, // 取消换行符\n或\r\n的验证()
    'max-len': 0, //字符串最大长度
    "no-unused-vars": 1, //禁止出现未使用过的变量
    "no-redeclare": 1, //禁止多次声明同一变量
    'no-use-before-define': 1, //禁止在变量定义之前使用它们
    "no-unused-expressions": 0, // 允许使用未使用过的表达式，以此来支持a && a()的代码形式
    'no-restricted-syntax': 1, //禁用特定的语法
    'no-plusplus': 1, //禁止使用++，--
    'no-extra-boolean-cast':0,//允许使用双重否定（!!）或者Boolean强行转换为布尔值
    'no-underscore-dangle': 0, // 允许在标识符中使用下划线
    'no-param-reassign': 0, // 禁止对 function 的参数进行重新赋值
    'no-nested-ternary': 0, // 禁止嵌套三元表达式
    'no-else-return': 0, //禁止 if 语句中 return 语句之后有 else 块
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-shadow': [1, { //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
      "allow": ["resolve", "reject", "done", "cb"]
    }],
    'prefer-rest-params': 1, //要求使用剩余参数而不是 arguments
    'prefer-arrow-callback': 0, //要求回调函数使用箭头函数
    'prefer-const': 1, //首选const
    "semi": false, // 使用分号, 默认true
    "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "tabWidth": 4, // tab缩进大小,默认为4
    'template-curly-spacing': 'off', //要求或禁止模板字符串中的嵌入表达式周围空格的使用
  },

3.规则配置说明：

• "off"或者0，不启用这个规则
• "warn"或者1，出现问题会有警告
• "error"或者2，出现问题会报错

prettier配置

prettier使用手册：prettier官方文档

1.prettier简单配置

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

2.常用格式化配置有：

tabWidth:2,//tab键的空格数
useTabs:true,//允许使用tab键
jsxSingleQuote:true,//在JSX文件中使用单引号，false为使用双引号，默认为false
bracketSpacing: true,//对象数据属性和{}间是否需要空格

集成vscode

• 安装好Eslint插件
• 安装Prettier - Code formatter插件
• 修改vscode的settings.json文件
• 文件位置：点击图中设置图标选择settings，出来的是UI界面，点击右上角转换文件标识，修改settings.json文件
  
  文件配置如下：

{
    "svn.enableProposedApi": "product",
    "window.zoomLevel": 0,
    "git.autofetch": true,
    "diffEditor.ignoreTrimWhitespace": true,
    "typescript.implementationsCodeLens.enabled": true,
    "javascript.suggest.enabled": false,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "editor.accessibilityPageSize": null,
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // 保存自动修复true
        "eslint.autoFixOnSave": true,
        // jsx自动修复有问题，取消js的format
        "editor.formatOnSave": false,
        // Enable/disable default JavaScript formatter (For Prettier)
        "javascript.format.enable": false,
        "prettier.singleQuote": false,
        // 点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中
        "prettier.eslintIntegration": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "[json]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
}