nvm、node、npm安裝以及pycharm配置eslint

nvm、node、npm之間的區別

1. nvm的官方叫法：nodejs版本管理工具。

    nvm相當於是家長，一個家長可以管理多個孩子。
    也就是說:一個nvm可以管理很多node版本和npm版本。

2. nodejs

在項目開發時的所需要的代碼庫

3. npm

在安裝的nodejs的時候，npm也會跟着一起安裝，它是包管理工具。
npm管理nodejs中的第三方插件

nvm、nodejs、npm的關系：

nvm是爸爸，管理nodejs和npm這一對雙胞胎兄弟。npm是哥哥，npm哥哥可以管理node弟弟的東西。

個人是這么理解的，要是有偏差，請指點。

mac安裝nvm

打開https://github.com/creationix/nvm。在下面的簡介中找到install這幾個字，然后繼續往下找，直到找到 

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

（隨着時間變哈 ，這個版本可能會出現變化，自行在github上查看） 
復制這些字，到Mac的terminal中，就會安裝nvm,安裝完成后，還暫時不能用，需要復制它提示的兩行代碼（就是下圖拿箭頭標出來的兩行代碼）來配置環境變量： 

完成以后 輸入

nvm

出現

node version manger

說明nvm安裝成功。

mac安裝node

如果大家之前做過web服務器的人都知道,nginx+lua與現在流行的node.js都是可以做web服務器的,前者在程序的寫法和配置上要比后者麻煩,但用起來都是差不多.在這里建議大家如果對lua腳本語言不了解,可以多了解這門腳本語言,他號稱是所有腳本語言執行效率是最高的一門腳本語言.底層是基於C語言的,非常好用,跨平台! 
下面我就來給大家配置一下node.js環境.

第一步:打開終端,輸入以下命令安裝Homebrew

ruby -e “$(curl -fsSL 
https://raw.githubusercontent.com/Homebrew/install/master/install); 

第二步:安裝node,在終端輸入以下命令

brew install node 

第三步 查看node安裝成功與否

node -v 

以上三步 node就安裝成功了

程序測試

第一步:新建一個文件test.js

var  http=require('http');//導入Node.Js中的Http的庫文件，並獲取句柄
//createServer函數，傳入回調函數,request,response
var server=http.createServer(function(req,res){
    console.log("Get A Request...");
    res.writeHead(200,{
        "Content-Type":"Text/plain"
    });
    res.write("Hello NodeJs666");
    res.end();
});
server.listen(5000);

第二步:用終端找到其所在的目錄運行

node test.js

第三步:通過瀏覽器進行訪問localhost:5000,返回數據

第四步:前端就可以通過調用這個接口進行數據解析了,並且可以在當前頁面進行數據展示了.

是不是很簡單,如果之前做過web服務接口開發的,這個應該不會陌生,甚至來說非常簡單了.

 

npm相關

npm install

安裝本地包

npm install <package_name>:這個命令將在當前目錄中創建node_modules目錄（如果尚不存在），並將該軟件包下載到該目錄。該命令默認本地安裝。

安裝了哪個版本的軟件包？

如果本地目錄中沒有package.json文件，則會安裝最新版本的軟件包。

如果有package.json文件，則安裝滿足該package（如果有的話）在package.json中聲明的semver規則的最新版本。

安裝全局包

npm install -g <package>：全局安裝包。

package.json

npm init

npm init：這個命令用於創建一個package.json。

npm init --yes或npm init -y:從當前目錄中提取的信息生成默認的package.json。創建過程中不會提問。

如果您的目錄中已經有一個package.json文件，並且運行了npm install，那么npm將查看該文件中的dependencies，並下載滿足所有這些的最新版本。

package.json文件中的description幫助人們在npm搜索中找到您的包，所以在package.json中進行自定義描述非常有用。

也可以完全自定義package.json文件的內容和在init期間提出的問題。這通過創建自定義.npm-init.js來完成。默認情況下，npm將查找您的主目錄。 〜/ .npm-init.js

dependencies與devDependencies

dependencies和devDependencies指定了項目依賴的包。

• dependencies：這些包在生產中需要。

• devDependencies：這些包用於開發和測試。

npm install <package_name> --save命令會添加條目到package.json的dependencies中。
npm install <package_name> --save-dev命令會添加條目到package.json的devDependencies中。

npm update

更新本地軟件包

npm update：用於更新依賴的軟件包。需要在package.json文件所在的目錄中運行該命令。

更新全局軟件包

npm update -g <package>：更新全局軟件包。
npm update -g：更新所有的全局軟件包。
npm outdated -g --depth=0：找出需要更新的包。

npm uninstall

卸載本地軟件包

npm uninstall <package>：從node_modules目錄中移除一個包。

npm uninstall --save <package>：從package.json的dependencies中移除一個包。

npm uninstall --save-dev <package>：從package.json的devDependencies中移除一個包。

實際操作時，發現使用npm uninstall <package>不僅會在node_modules目錄下刪除該包，還會將該包在package.json中dependencies或devDependencies里面的信息刪除。

卸載全局軟件包

npm uninstall -g <package>：卸載全局軟件包。

總結：本地命令加上-g就是全局命令。

參考自：npm

eslint介紹

es6 javascript的ESLint 代碼檢測

ESLint 是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

首先，安裝 ESLint。

$ npm i -g eslint 

然后，安裝 Airbnb 語法規則，以及 import、a11y、react 插件。

$ npm i -g eslint-config-airbnb $ npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react 

最后，在項目的根目錄下新建一個.eslintrc文件，配置 ESLint。

{ "extends": "eslint-config-airbnb" } 

現在就可以檢查，當前項目的代碼是否符合預設的規則。

index.js文件的代碼如下。

var unusued = 'I have no purpose!'; function greet() { var message = 'Hello, World!'; alert(message); } greet(); 

使用 ESLint 檢查這個文件，就會報出錯誤。

$ eslint index.js index.js 1:1 error Unexpected var, use let or const instead no-var 1:5 error unusued is defined but never used no-unused-vars 4:5 error Expected indentation of 2 characters but found 4 indent 4:5 error Unexpected var, use let or const instead no-var 5:5 error Expected indentation of 2 characters but found 4 indent ✖ 5 problems (5 errors, 0 warnings) 

上面代碼說明，原文件有五個錯誤，其中兩個是不應該使用var命令，而要使用let或const；一個是定義了變量，卻沒有使用；另外兩個是行首縮進為 4 個空格，而不是規定的 2 個空格。

配置eslint在pycharm中

原文：How to install NPM package in a home directory (PyCharm)

I don’t like to install things as a root user. If it’s possible to install something in my home directory, why not use it?

I use PyCharm for programming and for example to validate JavaScript code it needs http://eslint.org package. Let’s install ESLint in home directory and make it globally accessible.

First, we need to tell NPM that it should install everything in ~/.npm directory.

npm config set prefix '~/.npm'

Now every time when you install NPM package using -g option it will install it in ~/.npm directory. You don’t need the root access to do it. All executables will be in ~/.npm/bin directory. For example if I install ESLint using npm install -g eslintcommand then it will be possible to run eslint command from terminal using full path:

~/.npm/bin/eslint

It’s inconvenient, right? It’s better to be able to use just eslint command. To achieve that we need to modify ~/.bash_profilefile. Find in this file line which starts with PATH= and add ~/.npm/bin at the end of the line. In my ~/.bash_profile file it looks like this:

PATH=$PATH:$HOME/.local/bin:$HOME/bin:~/.npm/bin

If the line with PATH doesn’t exist then you can add it:

PATH=$PATH:~/.npm/bin

Now you need to apply changes.

source ~/.bash_profile

And it’s done. You should be able to run eslint without specifying the full path to the file.

Quick tip about PyCharm. PyCharm needs a full path to the ESLint directory, not to ESLint executable file. In settings you need to use~/.npm/lib/node_modules/eslint path.

PyCharm - ESLint configuration

報錯：Error : No ESLint configuration found

參考： https://stackoverflow.com/questions/38173326/no-eslint-configuration-found-error

The error you are facing is because your configuration is not present. To configure the eslint type

eslint --init

then configure as your requirement.

then execute the project again.

執行 eslint --init，效果如下：