eslinte和prettier 使用

92 阅读1分钟

开始

pnpm install eslint -D
# 生成配置文件
npx eslint --init
  • eslint配置
module.exports = {
//    parser: '@typescript-eslint/parser', // TS解析器 
   env: {
	browser: true, 
	es2020: true, 
	node: true, 
	jest: true 
   },
   globals: {
	 ga: true,
	  chrome: true,
	   __DEV__: true
	}, // 全局变量s
   parser: 'vue-eslint-parser',  //vue
   
   parserOptions: {
	files: 'src/*.*', //制定eslint文件范围	
	// 解析es6版本
	ecmaVersion: 6, //es6语法
	sourceType: "module", // es6模块支持
		ecmaFeatures: {
			jsx: true //jsx
		},
		parser: '@typescript-eslint/parser', // 解析vue文件里面Ts解析器 
   },
   extends: [ 'eslint:recommended', ],//eslint推荐配置
   rules: { 
	'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	'no-unused-vars': 'off' 
}


}

prettier

  • 安装
// pnpm i prettier -D

 // .prettierrc.js
module.exports = {

trailingComma: "all", // 尾部逗号

tabWidth: 2, // Tab宽度

singleQuote: true, // 引用单引号

};
  • 与eslint整合
 // pnpm install eslint-plugin-prettier" -D

// .eslintrc.js
{

"plugins": ["prettier"],

"rules": {

"prettier/prettier": "error"

}

}
  • 编辑器整合 插件 eslint-prettier