使用ESLint+Prettier来统一前端代码风格

amilytom
在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。

解决办法

  • 使用 eslint 检查代码
  • 使用 prettier 格式化代码

使用方法

(1)首先安装Eslint:

npm install eslint --save-dev

新建.eslintrc.js文件,下面是我的配置:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: 'babel-eslint',
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

(2)安装Prettier:

npm install --save-dev --save-exact prettier

新建.prettierrc.js文件,下面是我的配置:

module.exports = {
    // 一行最多 200 字符
    printWidth: 200,
    // 使用 2 个空格缩进
    tabWidth: 4,
    // 不使用缩进符,而使用空格
    useTabs: false,
    // 行尾不需要分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号不需要换行
    jsxBracketSameLine: true,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    endOfLine: 'lf',
    extends: ['plugin:prettier/recommended', 'prettier/flowtype', 'prettier/vue']
}
阅读 186

学而时习
默默的学,默默的练,默默的做,慢慢的……默默无闻

雁过留声,人去留名

673 声望
6 粉丝
0 条评论

雁过留声,人去留名

673 声望
6 粉丝
文章目录
宣传栏